javascript - 如何遍历 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 时如何遍历这些“列”？

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

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

Answer 1

如前所述，$ref 是执行您想要的操作的最佳方法。 小心使用ref。它会对用户的计算机造成沉重负担。

//模板

<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>

//脚本

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

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