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

Posted 2023-02-23

【中文标题】如何在 Vue Js 中传递组件以在 props 中呈现？

【英文标题】：How to pass a component to render in props in Vue Js?

【发布时间】：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"

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

【问题讨论】：

有什么问题？

在单元格内需要动态内容的地方生成一个表格。所以为了做到这一点，我不知道如何动态渲染。

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

【参考方案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>