J'ai donc créé un composant d'encapsulation simple avec un modèle comme:
<wrapper>
<b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>
en utilisant $attrs
et $listeners
pour transmettre les accessoires et les événements.
Fonctionne bien, mais comment le proxy wrapper peut-il attribuer les emplacements nommés <b-table>
À l'enfant?
Vue 2.6 (syntaxe v-slot)
Tous les créneaux horaires ordinaires seront ajoutés aux créneaux horaires, il vous suffit donc de faire ceci:
<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
Voir réponse de Paul .
Réponse originale
Vous devez spécifier les créneaux comme ceci:
<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>
Fonction de rendu
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)
])
}
Vous voudrez probablement aussi mettre inheritAttrs
à false sur le composant.
J'ai automatisé le passage de tous les créneaux horaires (et de tous) à l'aide de v-for
, comme indiqué ci-dessous. Le bon côté de cette méthode est qu’il n’est pas nécessaire de savoir quels créneaux doivent être transmis, y compris le créneau par défaut. Tous les créneaux passés au wrapper seront transmis.
<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>