vue.js - Vue js v3 组件无法再访问 $children。我们怎样才能得到一个组件 child ？

Question

在 Vue 2 中，我们可以使用 this.$children 获取组件槽中的所有子组件。但是对于 Vue 3，这不再可能了。而且我找不到任何关于替代方案或解决方法的信息!

那么，有人可以帮忙吗？ :)

我想实现的是:

要有一个名为 TabsView 的组件

我想像这样使用它:

<tabs-view>
  <tabs-title target="tab1">Title1</tabs-title>
  <tab-content name="tab1">...</tab-content>

  <tabs-title target="tab2">Title2</tabs-title>
  <tab-content name="tab2">...</tab-content>
<tabs-view>

我想要 TabsView 组件中的所有逻辑。所以这就是为什么我想在其中获取 $children。所以我可以使用子组件的值构建选项卡。

因为我将在不同的地方使用相同的标签来构建标签。而且我不想用 refs 复制逻辑。除非有一种方法可以使用 refs 来做到这一点，而无需将相同的逻辑移动到我使用组件的每个地方

Answer 1

您可以使用 this.$el.parentElement.children 获取 DOM 元素，但这不会为您提供组件。 this: this.$.subTree.children 将为您提供 child ，其中将包括 DOM 元素和组件。

但此功能可能出于某种原因被隐藏，所以如果 @Guillaume F希望您考虑替代解决方案，我会听取他的建议。

例子:

const app = Vue.createApp({
  data() {
    return {
      color: null
    }
  },
  mounted() {
    const children = this.$.subTree.children
    console.log(children.map(c => c.type))
  }
})

app.component('tabs-title', {
  template: '<h1>TITLE: <slot></slot></h1>'
})
app.component('tab-content', {
  template: '<p>TAB: <slot></slot></p>'
})

app.mount('#app')

<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.prod.js"></script>
<div id="app">
  <tabs-title target="tab1">Title1</tabs-title>
  <tab-content name="tab1">...</tab-content>

  <hr/> <!-- will return string as type -->
  <tabs-title target="tab2">Title2</tabs-title>
  <tab-content name="tab2">...</tab-content>
</div>