Vue进阶（幺贰捌）：Vue插槽：slot、slot-scope与指令v-slot使用方法区别讲解

在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue中插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。

demo

不具名插槽

   

      
         
slot插槽占位内容
      
   
   
   

具名插槽

   

      
         
这里是头部
//具名插槽使用
         
这里是尾部
      
   
   

v-slot

v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容。

   

      
         
         
         
直接插入组件的内容
         
         
      
   
   
   
   

作用域插槽：
slot-scope使用：

1. 在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

2. 在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

3. 通过scope.xxx就可以使用绑定数据了

   

      
         
//作用域插槽的用法（slot-scope）
            {
    { scope.msg }}
         
         
      
   

   

作用域插槽：v-slot的用法

Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家在应用时要注意。