そこで、次のようなテンプレートを使用して簡単なラッパーコンポーネントを作成しました。
<wrapper>
<b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>
$attrs
と$listeners
を使用して、小道具とイベントを伝えます。
正常に動作しますが、ラッパーはどのようにして<b-table>
名前付きスロットを子にプロキシできますか?
Vue 2.6(v-slot構文)
通常のスロットはすべてスコープスロットに追加されるため、これを行うだけで済みます。
<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に設定する必要があります。
以下に示すように、v-for
を使用して任意の(およびすべての)スロットの受け渡しを自動化しています。この方法の良いところは、デフォルトのスロットを含め、どのスロットを渡す必要があるかを知る必要がないことです。ラッパーに渡されたスロットはすべて渡されます。
<wrapper>
<b-table v-bind="$attrs" v-on="$listeners">
<!-- Pass on all named slots -->
<slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>
<!-- Pass on all scoped slots -->
<template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope"><slot :name="slot" v-bind="scope"/></template>
</b-table>
</wrapper>