Vue

by Owumaro

HTML

<div id="app">
  <my-component>
    <!--<template slot="mySlot" slot-scope="props">
      Hello {{ props.props }}
    </template>-->
  </my-component>
</div>

CSS

h2 { font-weight: bold; font-size: 32px; }
h3 { font-weight: bold; font-size: 24px; }
h4 { font-weight: bold; font-size: 18px; }

Vue

Vue.component('my-component', {
  template: `
  	<div>
      <h2>My component</h2>
      <my-sub-component>
      	<template v-if="$scopedSlots.mySlot" slot="mySlot" slot-scope="props">
          <slot name="mySlot" v-bind="props" />
        </template>
      </my-sub-component>
    </div>`
})

Vue.component('my-sub-component', {
  template: `
  	<div>
      <h3>My sub component</h3>
      <my-sub-sub-component>
        <template v-if="$scopedSlots.mySlot" slot="mySlot" slot-scope="props">
          <slot name="mySlot" v-bind="props" />
        </template>
      </my-sub-sub-component>
    </div>`
})

Vue.component('my-sub-sub-component', {
  template: `
  	<div>
      <h4>My sub sub component</h4>
      <slot name="mySlot" :props="'value'">
        Fallback
      </slot>
    </div>`
})

new Vue({
  el: '#app'
})