How to extend Vue component with default values for props and slots?

Question

I'm using bootstrap-vue in my application, and I have a lot of tables, which all have the same boilerplate code. Here's an example of what that boilerplate might look like:

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

I would of course like to factor out this boilerplate into some sort of common module, like a custom component, so that my starting point for a new table would look something more like this:

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

Ultimately, I would like my-awesome-table to act just like a normal b-table, but with all of this boilerplate already set, and where I can still set extra props and slots as needed.

However, I can't figure out a way to make this work. I've tried:

• making a wrapper component, but then I struggle to expose all of the functionality of the underlying b-table
• extending the b-table component, but then I struggle to set the prop and slot values as I've set them in my boilerplate template

How can I create a custom component which allows me to set default values for props and slots?

Answer 1

In case you prefer templates, you could create a wrapper component like this:

1. Assign v-bind to $attrs on b-table, which binds any attributes from the parent:

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

2. Assign v-on to $listeners on b-table, which attaches any event listeners from the parent

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

3. Pass any slots to b-table:

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

The result should look similar to this:

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