Vue.js 如何在Vue Js中传递要在道具中渲染的组件？

我有一个需要以语法方式呈现数据单元的情况

其中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"
}

tableProps：{
科尔斯：[{
手机道具：{
班级：“as”
},
cellRenderer:（（数据）=>{
返回{
data.name
}
}).绑定（此），
数据键：“名称”，
数据类型：String，
标签：“姓名”，
可排序：正确
}       
],
enableSelect:true，
onPageChange:this.onPageChange，
onSelect：（selectedRow）=>console.log（“selectedRow”，selectedRow），
onSelectAll：（data）=>console.log（“slectAllClick”，data），
页码：0，
rowProps：{
onClick：（事件，行数据）=>{
this.onClick（rowData）；
}
},
行页码：5，
标题：“营养”
}

---

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

找到了解决方案，可以使用作用域插槽来渲染每个单元格的动态内容，而不是发送函数。谢谢你表现出兴趣

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

**Table.Vue（子表，通用表）**
{{col.colRenderer（col）}
{{col.label}}
{{datum[col.dataKey]}
**调用组件（父级，带有自定义数据单元）**
✓
{{slotProps.name}

问题出在哪里？在需要单元格内动态内容的地方会生成一个表格。因此，为了做到这一点，我不知道如何动态呈现。已经找到了解决方案，可以使用作用域插槽来呈现每个单元格的动态内容，而不是发送函数。谢谢你表现出兴趣。