Vue插槽

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>