1. 介紹

​ 插槽，簡單的理解是我們在元件複用中子元件的一個佔位符，用slot表示。它可以用來接收父元件傳到子元件的內容，並顯示在slot這裡。

2. 作用

​ 插槽的存在可以讓使用者去擴充套件元件，更好地複用元件和更加靈活地定製化處理。

3. 插槽的分類

• 匿名插槽

• 預設具名插槽

• 具名插槽（新增name屬性）

• 作用域插槽（帶資料）

4. 插槽的具體使用

匿名插槽

1. 子元件

   <template>
     <div>
       <slot></slot>
     </div>
   </template>
   

2. 父元件

   <template>
     <div id="app">
       <comp>匿名插槽</comp>
     </div>
   </template>
   <script>
   import Comp from '@/components/Comp'
   export default {
     name: 'App',
     components: {
       Comp
     }
   }
   </script>
    
   

預設具名插槽

1. 子元件

   <template>
     <div>
        <slot></slot>
     </div>
   </template>
   

2. 父元件

   <template>
     <div id="app">
       <comp>
       	<template v-slot:default>
             預設具名插槽
         	</template>
       </comp>
     </div>
   </template>
   <script>
   import Comp from '@/components/Comp'
   export default {
     name: 'App',
     components: {
       Comp
     }
   }
   </script>
    
   

   注： 預設具名插槽，子元件的定義和匿名插槽是一樣的。但是在父元件引用時需要使用template去引用，並且通過v-slot去指明預設的插槽名稱default。其中v-slot:default也可以寫成#default

具名插槽

1. 子元件

   <template>
     <div>
        <slot name="myslot"></slot>
     </div>
   </template>
   

2. 父元件

   <template>
     <div id="app">
       <comp>
           <!-- 寫法1 -->
           <template #myslot>
             具名插槽
         	</template>
     		<!-- 寫法2 -->
       	<template v-slot:myslot>
             具名插槽
         	</template>
       </comp>
     </div>
   </template>
   <script>
   import Comp from '@/components/Comp'
   export default {
     name: 'App',
     components: {
       Comp
     }
   }
   </script>
    
   

   注： 同一個插槽不能在元件裡渲染多次的問題，這裡是為了向大家展示具名插槽的多種用法。下面介紹插槽傳值也是一樣。

作用域插槽

1. 子元件

   <template>
     <div>
       <slot name="mySlot" :user="user"></slot>
     </div>
   </template>
   <script>
   export default {
     data(){
       return{
         user:{
           name:"李四",
           age:14
         }
       }
     }
   }
   </script>
   

2. 父元件

   <template>
     <div id="app">
       <comp>
           <!-- 寫法1 -->
         	<template #mySlot="slot">
            	<div>作用域插槽:來自插槽的資料:{{slot.user.name}}:{{slot.user.age}}</div>
         	</template>
   
   		<!-- 寫法2 -->
       	<template v-slot:mySlot="prop">
            	<div>作用域插槽:來自插槽的資料:{{prop.user.name}}:{{prop.user.age}}</div>
         	</template>
   
   		<!-- 寫法3 解構寫法 -->
   		<template v-slot:mySlot="{user}">
            	<div>作用域插槽:來自插槽的資料:{{user.name}}:{{user.age}}</div>
         	</template>
       </comp>
     </div>
   </template>
   <script>
   import Comp from '@/components/Comp'
   export default {
     name: 'App',
     components: {
       Comp
     }
   }
   </script>