Vue: Pass Slots through from Parent to Child Components

How to pass slots to descendant components. Naive, non-working example.

by Loilo

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"></div>

JavaScript

// This code is an example demonstrating the situation described in this Gist:
// https://gist.github.com/Loilo/73c55ed04917ecf5d682ec70a2a1b8e2

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>`
}

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

new Vue({
	el: '#app',
  template: `<W :child="A"><span slot="a">Special A Content</span></W>`,
  data: {
  	A, B, C
  }
})