如何在 Vue Js 中传递组件以在 props 中呈现？答案

【问题标题】：How to pass a component to render in props in Vue Js?如何在 Vue Js 中传递组件以在 props 中呈现？
【发布时间】：2019-02-25 22:31:33
【问题描述】：

我遇到需要同步渲染数据单元格的情况

其中 tableProps 包含所有列和 dataProps。

tableProps: {
  cols: [{
      cellProps: {
        class: "as"
      },
      cellRenderer: ((data) => {
        return <a onlick = {
          this.onDataClick
        }
        class = "btn btn-link" > {
          data.name
        } < /a>
      }).bind(this),
      dataKey: "name",
      dataType: String,
      label: "Name",
      sortable: true
    }       
  ],
  enableSelect: true,
  onPageChange: this.onPageChange,
  onSelect: (selectedRow) => console.log("selectedRow", selectedRow),
  onSelectAll: (data) => console.log("slectAllClick", data),      
  page: 0,
  rowProps: {
    onClick: (event, rowData) => {
      this.onClick(rowData);
    }
  },
  rowsPerPage: 5,
  title: "Nutrition"
}

有一个单元格渲染器，可以在其中传递数据以渲染自定义数据，如按钮锚等。

【问题讨论】：

有什么问题？
在单元格内需要动态内容的地方生成一个表格。所以为了做到这一点，我不知道如何动态渲染。
已经找到解决方案，可以使用作用域槽来为每个单元格呈现动态内容，而不是发送函数。感谢您的关注。

标签： vue.js dynamic components children

【解决方案1】：

已找到解决方案，可以使用作用域槽来为每个单元格呈现动态内容，而不是发送函数。感谢您的关注。

**Table.Vue(child, generic-table)**
<table class="table table-bordered">
  <thead>
    <tr>
      <th v-for="col in options.cols" :key="col.id">
        <template v-if="col.colRenderer">
          {{col.colRenderer(col)}}
        </template>
        <template v-else>
          {{col.label}}
        </template>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="datum in data" :key="datum.id" @click="(e)=> options.rowProps.onClick ? options.rowProps.onClick(e, datum): ''">
      <td v-for="col in options.cols" :key="col.id" @click="()=> col.onClick ? col.onClick(datum[col.dataKey]): ''">
        <template v-if="col.cellSlot">
          <slot :name="col.cellSlot.name" :data="datum[col.dataKey]"/>
        </template>
        <template v-else>
          {{datum[col.dataKey]}}
        </template>
      </td>
    </tr>
  </tbody>
</table>

**Calling component(Parent, with Custom Data cells)**
<v-table
  :name="carePlanName"
  :options="tableProps"
  :total-count="totalCount"
  :data="users" >      
    <div
      slot=""
      slot-scope="slotProps">
      <!-- Define a custom template for CellData Data -->
      <!-- `slotProps` to customize each todo.            -->
      <span v-if="slotProps">✓
        <button>{{ slotProps.name }}</button>
      </span>
    </div>
</v-table>

【讨论】：