Tencent / tdesign-vue-next-starter

A starter-kit for TDesign Vue Next UI components
https://tdesign.tencent.com/starter/vue-next/
MIT License
707 stars 193 forks source link

[Tabs 选项卡] TabPanel使用Slot插槽时,控制台有Vue warn警告 #721

Open 201620172018 opened 6 months ago

201620172018 commented 6 months ago

tdesign-vue-next-starter 版本

1.9.5

重现链接

No response

重现步骤

<template>
  <t-tabs :default-value="1">
    <t-tab-panel :value="1">
      <template #label>
        <span style="margin-right: 10px;">选项卡一</span>
        <span>({{ count }})</span>
      </template>
      <p style="margin: 20px;">选项卡一内容区</p>
    </t-tab-panel>
    <t-tab-panel :value="2" label="选项卡二">
      <p style="margin: 20px">选项卡二内容区</p>
    </t-tab-panel>
    <t-tab-panel :value="3" label="选项卡三">
      <p style="margin: 20px">选项卡三内容区</p>
    </t-tab-panel>
  </t-tabs>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'

const count = ref(0)

onMounted(() => {
  nextTick(() => {
    count.value = 999
  })
})
</script>

期望结果

控制台没有 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

实际结果

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <TTabNav theme="normal" value=1 size="medium"  ... > 
  at <TTabs default-value=1 > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <KeepAlive include= (3) ['DashboardDetail', 'accountManage', 'billManage'] > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="fade" mode="out-in" > 
  at <RouterView key=0 > 
  at <Content> 
  at <TContent class="tdesign-starter-content-layout" > 
  at <TLayout class="tdesign-starter-layout" id="main-scroll-container" > 
  at <LayoutContent id="main-scroll-container" > 
  at <TContent> 
  at <TLayout> 
  at <TLayout key="side" class="t-layout--with-sider" > 
  at <Index class="light" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView key="zh_CN" class="light" > 
  at <TConfigProvider global-config= {pagination: {…}, cascader: {…}, calendar: {…}, transfer: {…}, timePicker: {…}, …} > 
  at <App>

框架版本

Vue(3.4.27)

浏览器版本

No response

系统版本

No response

Node版本

21.1.0

补充说明

No response

github-actions[bot] commented 6 months ago

👋 @201620172018,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] commented 6 months ago

♥️ 有劳 @timi137137 @liweijie0812 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @201620172018 。

hedanto commented 5 months ago

遇到同样的问题请问解决了吗?

hedanto commented 5 months ago

遇到同样的问题请问解决了吗?