如何在vue js中传递要在道具中呈现的组件?

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

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