Vue - how to pass down slots inside wrapper component?

Question

So I've created a simple wrapper component with template like:

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

using $attrs and $listeners to pass down props and events.
Works fine, but how can the wrapper proxy the <b-table> named slots to the child?

Answer 1

Vue 3

Same as the Vue 2.6 example below except:

• $listeners has been merged into $attrs so v-on="$listeners" is no longer necessary. See the migration guide.
• $scopedSlots is now just $slots. See migration guide.

---

Vue 2.6 (v-slot syntax)

All ordinary slots will be added to scoped slots, so you only need to do this:

<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

See Paul's answer.

---

Original answer

You need to specify the slots like this:

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

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)   ]) } 

You probably also want to set inheritAttrs to false on the component.