如何使用 props 和 slot 的默认值扩展 Vue 组件？

Question

我bootstrap-vue在我的应用程序中使用，并且我有很多表，它们都具有相同的样板代码。以下是该样板的示例：

<b-table
  :items="someItemList"
  :busy="someItemList === null"
  :empty-text="$t('notFound')"
  :empty-filtered-text="$t('notFound')"
  no-sort-reset
  show-empty
  striped
  hover
>
  <div slot="table-busy" class="text-center my-3">
    <b-spinner class="align-middle"/>
  </div>
</b-table>

我当然想把这个样板分解成某种通用模块，比如自定义组件，这样我的新表的起点看起来更像这样：

<my-awesome-table :items="someItemList">
</my-awesome-table>

最终，我想表现得像my-awesome-table一个普通的b-table，但是所有这些样板都已经设置好了，我仍然可以根据需要设置额外的道具和插槽。

但是，我想不出一种方法来完成这项工作。我试过了：

• 制作一个包装组件，但后来我很难公开底层的所有功能 b-table
• 扩展b-table组件，但是我很难设置 prop 和 slot 值，因为我已经在我的样板模板中设置了它们

如何创建允许我为道具和插槽设置默认值的自定义组件？

Answer 1

如果你更喜欢模板，你可以像这样创建一个包装器组件：

1. 分配v-bind给$attrson b-table，它绑定来自父级的任何属性：

<b-table v-bind="$attrs" ...>

2. 分配v-on给$listenerson b-table，它附加来自父级的任何事件侦听器

<b-table v-on="$listeners" ...>

3. 将任何插槽传递给b-table：

<b-table ...>
  <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
    <slot :name="slot" v-bind="scope" />
  </template>
</b-table>

结果应该类似于：

<template>
  <b-table
    your-prop-a
    your-prop-b
    your-prop-c
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </b-table>
</template>