如何从 Vue.js2 上的未命名插槽获取组件实例

Question

I have next template:

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

How i can get component instances of TableColumn ?

On TableComponent I have next mounted method:

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

    console.info(columnComponents)
},

But on console info I got empty array. How I can get TableColumn props?

Answer 1

Use a ref

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

and then

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