vue slots delegate

by zhang li

HTML

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<div id="app"></div>

JavaScript

Vue.component('A', {
	template: '<div class="a"><slot name="inner" a="1">inner default</slot></div>'
});

Vue.component('B', {
	template: `
  	<div class="b">
    	<A>
      	<template v-if="this.$slots.outer">
          <template slot="inner" scope="props">
            <slot name="outer">outer default</slot>
          </template>
        </template>
      </A>
    </div>`
});

new Vue({
	el: document.getElementById('app'),
  template: `
  	<div>
      <B></B>
      ====
      <B><template slot="outer" scope="props">outer</template></B>
    </div>
  `
});