Vue.js 将插槽传递给包装好的 Bootstrap-Vue 表组件

Posted 2023-02-22

【中文标题】Vue.js 将插槽传递给包装好的 Bootstrap-Vue 表组件

【英文标题】：Vue.js pass slot to wrapped Bootstrap-Vue Table component

【发布时间】：2020-02-14 12:54:11

【问题描述】：

我正在尝试为 bootstrap-vue Table 组件创建一个包装器。该组件使用槽来定义单元格模板，如下所示：

<b-table :items="itemsProvider" v-bind="options">
    <template v-slot:cell(id)="data">
        ///...here goes the template for the cell's of itens key "id"
    </template>
</b-table>

所以，我正在创建的包装器是这样的：

    <div>
        <b-table :items="itemsProvider" v-bind="options" >
            <slot></slot>
        </b-table>
        <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
                 />
    </div>

我想这样调用这个组件：

<TableAjax :options="options">
    <template v-slot:cell(id)="data">
        ///...here goes the template for the cell's of itens key "id"                    
    </template>
</TableAjax>

但是，由于 b-table 组件上所需的插槽已命名，我很难从包装器中传递它。

我该怎么做？

【参考方案1】：

将槽传递给子组件可以这样完成：

<template>
  <div>
    <b-table :items="itemsProvider" v-bind="options" >
      <template v-slot:cell(id)="data">
         <slot name="cell(id)" v-bind="data"></slot>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    />
  </div>
</template>

但由于您可能不提前知道插槽名称，因此您需要执行以下类似操作：

<template>
  <div>
    <b-table :items="itemsProvider" v-bind="options" >
      <template v-for="slotName in Object.keys($scopedSlots)" v-slot:[slotName]="slotScope">
        <slot :name="slotName" v-bind="slotScope"></slot>
      </template>
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
    />
  </div>
</template>

【讨论】：

您的示例不起作用，但给了我前进的道路！谢谢！我已将您的答案编辑为正确的解决方案！