Tencent / tdesign-vue-next

A Vue3.x UI components lib for TDesign.
https://tdesign.tencent.com/vue-next
MIT License
1.35k stars 445 forks source link

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

Open hedanto opened 5 days ago

hedanto commented 5 days ago

tdesign-vue-next 版本

"tdesign-vue-next": "^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警告

实际结果

[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版本

v18.18.2

补充说明

No response

github-actions[bot] commented 5 days ago

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