Vue

by roguexiaohuihui

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h5>Nested pass slot</h5>
  <grand-father>
     <div slot="passName">
         my name is grandFather,I want to show it in child
         <!-- Slot with many different names-->
     </div>
  </grand-father>
 
</div>

Vue

Vue.component('grandFather', {
  template:  
  `
  <div>
  	<father>
    	  	<div slot="passName">
    	  		<slot name="passName"></slot>
    			</div>
    </father>
  </div>
  `
})


Vue.component('father', {
  template:  
  `
  <child>
  	<div slot="passName"> 
  		<slot name="passName"></slot>
  	</div>
  </child>
  `
})


Vue.component('child', {
  template:  
  `
  <div> 
  	<slot name="passName"></slot>
  </div>
  `
})


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