1. 單個插槽
   父元件

   <template>
     <div id="app">
       <hello-world>
         <!--倘若子元件裡沒有slot,那這段html程式碼會被棄用-->
         <div>我是父元件裡得內容，我要在子元件的slot中展示出來</div>
         <br>
       </hello-world>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return {}
       },
       components:{
         HelloWorld
       }
     }
   </script>
   <style>
   </style>
    
   

   子元件

   <template>
     <div class="chind">
       <div>
         <slot></slot>
       </div>
     </div>
   </template>
   <script>
     export default {}
   </script>
   <style scoped>
   </style>
   

2. 具名插槽
   父元件

   <template>
     <div id="app">
       <hello-world :slotitems="items">
         <div>假髮</div> 
         <div slot="test">我是父元件裡得內容，我要在子元件的slot中展示出來</div> 
       </hello-world>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return { }
       },
       components:{
         HelloWorld
       }
     }
   </script>
   <style>
   </style>
    
   

   子元件

   <template>
     <div class="chind">
       <br/>
       <div>
         <slot></slot><!--“假髮”將會被展示在這個沒有名字的slot中--> 
         <slot name="test"></slot>
       </div>
     </div>
   </template>
   
   <script>
     export default {}
   </script>
   <style scoped>
   </style>
   
    
   

3. 插槽作用域
   父元件

   <template>
     <div id="app">
       <hello-world :slotitems="items">
         <div slot="test">我是父元件裡得內容，我要在子元件的slot中展示出來</div>
         <br>
         <template slot-scope="props">
           <span>{{ props.cname }}</span>
           <span>{{ props.text }}</span>
           <span>{{ props.age }}</span>
         </template>
       </hello-world>
     </div>
   </template>
   <script>
     import HelloWorld from './components/HelloWorld'
     export default {
       data(){
         return {
           items:{text:'插槽練習' , cname:'張三' }
         }
       },
       components:{
         HelloWorld
       }
     }
   </script>
   <style>
   </style>
   
   

   子元件

   <template>
     <div class="chind">	
       <div>
         <slot name="test"></slot>
         <slot :cname="slotitems.cname"></slot>
         <slot :text="slotitems.text"></slot>
         <slot age="18"></slot>
       </div>
     </div>
   </template>
   
   <script>
     export default {
       props: ['slotitems'],//主要是通過props來接受父元件傳過來的值
       }
   </script>
   <style scoped>
   </style>
   
   

注：適用於元件重用但是又有不相同的地方