Vue.js将插槽传递给包装的Bootstrap-Vue Table组件 [英] Vue.js pass slot to wrapped Bootstrap-Vue Table component

问题描述

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

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>

我想这样调用此组件:

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

但是，由于b表组件上需要的插槽已命名，因此我很难从包装器中传递它.

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

我该怎么做?

推荐答案

可以通过以下方式将插槽传递给子组件:

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>

这篇关于Vue.js将插槽传递给包装的Bootstrap-Vue Table组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！