如何从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;
    });
}