Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hedanto opened this issue Jun 12, 2024 · 2 comments
Closed
Labels
duplicate This issue or pull request already exists

Comments

@hedanto
Copy link

hedanto commented Jun 12, 2024

tdesign 版本

"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

@dellyoung
Copy link

用"tdesign-vue-next": "1.9.8"也出现了同样问题

@uyarn
Copy link
Collaborator

uyarn commented Sep 30, 2024

duplicate of Tencent/tdesign-vue-next#4344

@uyarn uyarn closed this as completed Sep 30, 2024
@uyarn uyarn added the duplicate This issue or pull request already exists label Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants