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警告 #4344

Closed
hedanto opened this issue Jun 27, 2024 · 3 comments
Closed
Assignees
Labels

Comments

@hedanto
Copy link

hedanto commented Jun 27, 2024

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

Copy link
Contributor

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

@uyarn uyarn added the vue 3.4 label Jun 27, 2024
@uyarn uyarn self-assigned this Jun 28, 2024
@xyq0716
Copy link

xyq0716 commented Aug 16, 2024

生产环境打包后,TabPanel使用slot插槽包含变量时,会报阻塞性错误,期望官方尽快解决

@uyarn
Copy link
Collaborator

uyarn commented Aug 16, 2024

生产环境打包后,TabPanel使用slot插槽包含变量时,会报阻塞性错误,期望官方尽快解决

是与vue3.4不兼容导致 暂时先保证vue版本在3.3.x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants