Vue - ラッパーコンポーネント内のスロットを下に渡すには？

質問

というようなテンプレートで、簡単なラッパーコンポーネントを作ってみました。

<wrapper>
   <b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>

を使って $attrs と $listeners で小道具やイベントの受け渡しをします。

うまくいくのですが、ラッパーはどのようにして <b-table> と名付けられたスロットを子へプロキシすることができますか？

どのように解決するには？

Vue 3

以外は下のVue 2.6の例と同じ。

• $listeners にマージされました。 $attrs ということで v-on="$listeners" は不要になりました。参照は 移行ガイド .
• $scopedSlots は、現在ではただの $slots . 参照 移行ガイド .

Vue 2.6 (v-slot構文)

通常のスロットは全てscoped slotsに追加されるので、これだけでOKです。

<wrapper>
  <b-table 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>
</wrapper>

Vue 2.5

参照 ポールの回答 .

オリジナルの回答

このようにスロットを指定する必要があります。

<wrapper>
  <b-table v-bind="$attrs" v-on="$listeners">
    <!-- Pass on the default slot -->
    <slot/>

    <!-- Pass on any named slots -->
    <slot name="foo" slot="foo"/>
    <slot name="bar" slot="bar"/>

    <!-- Pass on any scoped slots -->
    <template slot="baz" slot-scope="scope"><slot name="baz" v-bind="scope"/></template>
  </b-table>
</wrapper>

レンダリング機能

render(h) {
  const children = Object.keys(this.$slots).map(slot => h('template', { slot }, this.$slots[slot]))
  return h('wrapper', [
    h('b-table', {
      attrs: this.$attrs,
      on: this.$listeners,
      scopedSlots: this.$scopedSlots,
    }, children)
  ])
}

また inheritAttrs を false に設定することも必要でしょう。