如何遍历 Vue 组件的子组件

Question

我的组件中有当前结构：

<data-table>
    <template slot="column" field="a"></template>
    <template slot="column" field="b"></template>
    <template slot="column" field="c"></template>
</data-table>

渲染我的时如何遍历这些“列” data-table？

编辑：结果向我的列添加引用不起作用，因为根据文档，引用仅在组件实际呈现时存储在它们的变量中。相反，我使用$slots变量来迭代方法上的列mounted，如下所示：

mounted: function() {
    this.$slots.column.forEach(
        //my code...
    );
}

Answer 1

如前所述，$ref是做你想做的最好的方法。小心使用ref。它可能会给用户的机器带来沉重的负担。

// template

<data-table>
    <template slot="column" field="a" ref="columns"></template>
    <template slot="column" field="b" ref="columns"></template>
    <template slot="column" field="c" ref="columns"></template>
</data-table>

// script

{
  ...
  mounted() {
    this.$refs.columns.forEach(col => {
      // Do something with `col`
      console.log(col)
    })
  }
}

基本上，如果您有超过 1 个ref具有相同名称（如'columns'），则该引用将转换为 a VueComponent[]（即 vue 组件数组）。