Vue js v3 component does not have access to $children anymore. How can we get a component children?

Question

With Vue 2, we could use this.$children to get all the children components in the component slot. But with Vue 3 this is not possible anymore. And I couldn't find anything about an alternative or a workaround!

So, can anyone help with that? :)

What I want to achieve is:

To have a component with let's say name TabsView

And I want to use it like this:


  Title1
  ...

  Title2
  ...

And I want all the logic inside the TabsView component. So that is why I want to get the $children within it. So I can build the tabs using the values of the children components.

Because I will use the same to build tabs in different many places. And I don't want to copy the logic with refs. unless there is a way to do that with refs without moving the same logic to every place I use the component

user_197546 · Answer

You can either use this.$el.parentElement.children to get the DOM elements, but that won't give you the components. this: this.$.subTree.children will give you the children, which will include DOM elements and the components.

But this functionality is likely kept hidden for a reason, so if @Guillaume F wants you to consider an alternate solution, I'd heed his advice.

example:

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: 'TITLE: '
})
app.component('tab-content', {
  template: 'TAB: '
})

app.mount('#app')



  Title1
  ...

  
 
  Title2
  ...

Vue js v3 component does not have access to $children anymore. How can we get a component children?

1 Answers