Vue: Pass Slots through from Parent to Child Components

The Situation

We've got some components A, B and C which provide different slots.

const A = {
  template: `<div><slot name="a">Default A Content</slot></div>`
}

const B = {
  template: `<div><slot name="b">Default B Content</slot></div>`
}

const C = {
  template: `<div><slot name="c">Default C Content</slot></div>`
}

We have a wrapper component W. It receives one of A, B or C as a prop and renders it. W is not aware which slots are provided by either of them.
```
Vue.component('W', {
  props: ['child'],
  template: `<component :is="child" />`
})
```
We want to write a template that uses W but also use the slots offered by the respective wrapped component.

The Problem

Vue won't let us do the following:

<W :child="A">
  <div slot="a">Special A Content</div>
</W>

It just does nothing. Which is very correct, if you think about it: Slot a is expected to be a slot of W, not of the wrapped A.

See this jsFiddle

The Solution

We need to extend our W component's template to pass through any slots it is provided to its wrapped component.

It looks like this:

Vue.component('W', {
  props: ['child'],
  template: `<component :is="child">
  <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
</component>`
})

Now the example will work just fine: jsFiddle

Bonus A: Scoped Slots

Scoped slots like the following...

const D = {
  template: `<div><slot name="d" emoji="🎉">Default D Content</slot></div>`
}

...are not handled by the extended template above. They're just ignored.

However, those can be managed in a very similar fashion to regular slots:

<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>

Include that alongside the slot passing from above, and our W component will just pass every slot and scoped slot it receives down to its child:

Vue.component('W', {
  props: ['child'],
  template: `<component :is="child">
  <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
  <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
</component>`
})

See it in action in this jsFiddle.

Bonus B: Vue 3

In their essence, scoped slots are just a more powerful superset of "regular" slots. But since introducing them needed a slightly different API, Vue 2 had to distinguish between $slots and $scopedSlots.

Vue 3 took the chance and unified both APIs. The less powerful old slots are gone and the old scoped slots are now just called "slots".

Passing on all slots in Vue 3 is similar (but not exactly equivalent) to passing on scoped slots in Vue 2, so here is the W component from the previous section, adjusted to Vue 3:

Vue.component('W', {
  props: ['child'],
  template: `<component :is="child">
  <template v-for="(_, name) in $slots" v-slot:[name]="slotData"><slot :name="name" v-bind="slotData" /></template>
</component>`
})