Javascript 如何在Vue 3中访问$children以创建选项卡组件？

我正在尝试在Vue 3中创建一个与此类似的

选项卡

组件

内容
内容
{{t}
内容

不幸的是，当内部的

选项卡

是动态的，即

选项卡

上有一个v-if，或者

选项卡

使用

v-for

循环渲染时，建议的解决方案不起作用-它失败

我在这里为它创建了一个Codesandbox，因为它包含

.vue

文件：

我尝试过使用

onBeforeMount

之类的

onBeforeMount

，但这也不起作用。实际上，它确实插入了新的选项卡，但是选项卡的顺序改变了

最大的障碍似乎是在Vue 3中似乎无法从父级获取/设置

子级数据。（如Vue 2.x中的
$children
）。有人建议使用
this.$.subtree.children
，但后来强烈建议不要使用它（不管我怎么做也帮不了我）

有谁能告诉我如何使
选项卡
内部的
选项卡
反应并在
v-if
等上更新？
这看起来像是将项目索引用作
v-for
循环的
键的问题

第一个问题是您在子元素上应用了
v-for
的
键
，而子元素应该在父元素上（在本例中是在
上）


❌


另外，如果
v-for
支持数组可以重新排列其项（或删除中间项），则不要将项索引用作
键，因为索引不会提供一致的唯一值。例如，如果从列表中删除了第2项（共3项），则第三项将上移到索引1中，使用被删除项以前使用的
键。由于列表中的键没有更改，Vue将现有虚拟DOM节点作为优化重用，并且不会发生重新排序

在您的案例中，要选择的一个好的
键是选项卡的
标题
值，因为在您的示例中，每个选项卡都是唯一的。这是新的
选项卡.vue
，其中
索引
已替换为
标题
道具：

//Tab.vue
导出默认值{
道具：[“title”]，此解决方案位于Vuejs论坛，看起来是正确的解决方法。缺少的难题是
getCurrentInstance
在
设置过程中可用

完整的工作代码可在此处找到：


我将它添加到这里，供来自谷歌的任何人参考。
谢谢你的帮助。我现在更了解键控。但在你的演示中，它仍然没有呈现
v-for
选项卡：请参见App.vue中的
Dynamic{{{{t}}
。有什么想法吗？还有一条评论。在vue 2中，它不需要“键控”带有
标题的选项卡
或任何东西，因为
$children
提供了对插槽子项的直接访问。因此，执行
12
非常好。现在似乎我们需要在每个
上指定一个
标题或某种键。您能想出一种方法来识别所选选项卡，而不使用tab.title或其他任何选项吗r key？@supersan I修复了缺少动态选项卡的问题（请参阅更新的演示），但此解决方案（以及您链接到的原始解决方案）不是理想的IMO，因为它需要进入<代码> VNode <代码>内部来解析标签的标题只是为了显示标签头。我认为一个更好的解决方案是将数据作为一个道具传递到 Tabs<代码>和/或使用范围槽。（如Vuetify、BootstrapVue、Buefy等）。再次感谢您的帮助。您是对的，这个Vnode很糟糕。在Vue 2.x中，事情要简单得多，因为我们可以直接访问插槽的
$children
，而且它也是反应式的，所以即使拖动或排序选项卡，它也会自动更新。我确实查看了Bootstrapvue、Vuetify等，但它们尚未迁移到Vue 3 just（谁知道他们面临着同样的问题lol）。无论如何，我现在还是坚持使用Vue 2.x。不管怎样，它已经足够满足我的需要了。我只是临时升级，因为
vite
，这看起来很节省时间。