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

Question

I'm trying to create a wrapper for the bootstrap-vue Table component. This component uses slots to define cell templates, like that:

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

So, the wrapper i'm creating is like this:

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

And i want to call this component like this:

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

But, since the slots needed on the b-table component are named, i'm having a hard time passing it from the wrapper.

How can i do that?

Answer 1

Passing slots to a child component can be done like this:

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

But since you may not know the slot names ahead of time, you would need to do something similar to the following:

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