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是做自己想要的事的最佳方法。

// 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)
    })
  }
}

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

Answer 2

呈现data-table时是否尝试过v-for迭代？并根据数据属性创建列？

例如：

<template v-for="(col,index) in columns" slot="col.column" field="col.a"></template>

Answer 3

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

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

如何遍历Vue组件的子级

3 个答案: