Javascript 如何迭代Vue组件的子级

我的组件中有当前结构：

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

<table>
  <tr>
    <td v-for="(slot,ind) in loopdata">
     <slot :name="'col'+ind" :data="slot"></slot>
    </td>
  </tr>
</table>

---

在呈现

数据表

？时是否尝试过v-for迭代，并基于数据属性创建列

例如：

---

如前所述，

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

---

基本上，如果您有多个同名的

ref

（如

'columns'

），则该引用将转换为

VueComponent[]

（即vue组件数组）

创建插槽时，可以设置动态名称。样本组件：

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

<table>
  <tr>
    <td v-for="(slot,ind) in loopdata">
     <slot :name="'col'+ind" :data="slot"></slot>
    </td>
  </tr>
</table>

然后使用插槽：

<data-table>
    <template slot="col1" slot-scope="{data}"></template>
    <template slot="col2" slot-scope="{data}></template>
    <template slot="col3" slot-scope="{data}></template>
</data-table>

您可以为它们中的每一个分配一个

ref

（可能不是最好的解决方案，但却是第一个想到的解决方案），即

，我不知道refs能够顺利处理多个元素。好极了

当我尝试检查数组长度时，$refs.columns

是

未定义的