vue.js - 如何使用 props 和 slots 的默认值扩展 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 一样工作，但是所有这些样板都已经设置好了，我可以在哪里仍然根据需要设置额外的 Prop 和插槽。

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

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

如何创建允许我为 prop 和 slot 设置默认值的自定义组件？

Answer 1

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

1. 分配v-bind至 $attrs在 b-table 上，它绑定(bind)来自父级的任何属性:

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

1. 分配v-on至 $listeners在 b-table 上，附加来自父级的任何事件监听器

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

1. 通过任何$scopedSlots到 b-table:

<b-table ...>                   💈
  <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
    <slot :key="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 :key="slot" :name="slot" v-bind="scope" />
    </template>
  </b-table>
</template>

💈 在 Vue 3 中，$scopedSlots 被替换为 $slots ，因此在迁移到 Vue 3 时应该在上面的示例中使用它。