Alternative to this.$children in vue

in vue 2 I can to this

<tabs>
	<tab name="some-title"></tab>
	<tab name="some-other-title"> </tab>
</tabs>

and on the tabs componenet I can access all children component with this.$children

		created () {
			this.tabs = this.$children
		},

With this I could create a tab component but now in Vue 3, this.$children is no longer supported and refs is not recommended in the docs.

You know a way to make this work? Thanks.

vincent15000

3 years ago

Level 63

In the documentation, it's recommanded to use refs.

https://v3-migration.vuejs.org/breaking-changes/children.html

In 3.x, the $children property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using template refs.

1 like

successdav

3 years ago

Level 4

@vincent15000 I have tried using refs and I can only get hold of children that are insided the component where it is created. e.g.

//inside the tabs.vue component
<template>
	<tab ref="tab"></tab>
    <tab ref="tab"></tab>
</template>

In the code above, vue refs will return the two tab children but when I use this component elsewhere like

<tabs>
		<tab ref="tab">Tab One content</tab>
        <tab ref="tab">Tab One content</tab>
</tabs>

In this second example, vue refs will return undefined.

Please or to participate in this conversation.