Как получить экземпляр компонента из неназванных слотов на Vue.js2

Question

У меня есть следующий шаблон:

<TableComponent>
    <TableColumn v-bind:field="'firstName'" v-bind:label="'First Name">
</TableColumn>

Как я могу получить экземпляры компонентов TableColumn?

В TableComponent у меня есть следующий mounted метод:

mounted () {
    const columnComponents = this.$slots.default
    .filter(column => column.componentInstance)
    .map(column => column.componentInstance)

    console.info(columnComponents)
},

Но в информации о консоли я получил пустой массив. Как я могу получить TableColumn реквизит?

Answer 1

Используйте ref

<TableComponent>
    <TableColumn ref="tableColumn" v-bind:field="'firstName'" v-bind:label="'First Name">
</TableColumn>

, а затем

mounted() {
    this.$nextTick(() => {
        const col = this.$refs.tableColumn;
    });
}