Vue插槽：slot、slot-scope与指令v-slot使用方法区别讲解

不具名插槽

   

      
         
slot插槽占位内容
      
   
   
   

image.png

具名插槽

   

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

image.png

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

   

      
         
         
         
直接插入组件的内容
         
         
      
   
   
   
   

image.png

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

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

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

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

   

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

   

image.png

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

image.png

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

转载自：https://blog.csdn.net/sunhuaqiang1/article/details/106742853
参考：https://blog.csdn.net/u012733501/article/details/107046903/
参考：https://www.cnblogs.com/bulici/p/11733840.html