Vue nested slots

How to make default slot content work with nested slots.

by Tim McKay

HTML

<div id="vue">
  You can either check $slots on the child or on the grandchild. This fiddle shows both methods
  <hr>
  <child>
    <template slot="a1">Hello</template>
    <template slot="a1">Entire</template>
    <template slot="a2">World</template>
  </child>
  <hr>
  <child>Hullo</child>
</div>

JavaScript

Vue.component('child', {
	template:`
    <grandchild>
    	<template slot="b1"><slot name="a1"></slot></template>
    	<template v-if="$slots.a2" slot="b2"><slot name="a2"></slot></template>
    </grandchild>`
})
Vue.component('grandchild', {
	template:`
  	<div>
    	<slot v-if="$slots.b1 && $slots.b1.length" name="b1"></slot>
      <template v-else>Default 1</template>
      <slot name="b2">Default 2</slot>
    </div>`,
    created(){
    	console.log(this.$slots)
    }
})
new Vue({
	el:'#vue'
})