Vue中的slot、slot-scope、v-slot辨析

1.slot(插槽)

概念
插槽是Vue中的一个中的一个特殊特性，他的作用是，在指定位置，开辟一个空间，给未来的元素使用，这里所谓的未来元素指的就是组件的内容，但是slot已被废弃。
下面以一个简单的例子来说明上述问题。

    

        
            
这是Test组件
        
    
    

在上述案例代码中，我们运行后可以发现，在id为app的范围内的p标签的内容并没有显示，显示的是名为Test的组件模板中的内容，这是因为写在id为app的中的Test组件中的内容会被Test自身的模板内容覆盖，所以只显示模板中的内容。slot能够为Test组件中的内容开辟一个空间，让Test使用，此时只需要在

  
这是Test组件模板

该行代码的上一行或者下一行，写入

就可以达到需求。

具名插槽
具名插槽指的是，当我们需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽，达到开辟的空间能够与组件内容相对应的效果。
具体使用如下：
先利用slot插槽的那么为当前插槽定义一个名字，名字随意定义

在对应的位置，将对应的标签与slot定义的名字绑定，如下

完整案例代码如下：

    

        
            

                头部
            
            

                底部
            
        

    
    

2.作用域插槽【slot-scope】

作用域插槽其实就是一个带有数据的插槽，我们知道组件中的数据只能在对应的组件模板中使用，在其他地方无法获取，那么要想在其他地方获取到该数据，就可以通过使用slot-scope来获取，但是slot-scope已被废弃。
具体使用如下：
首先将组件中的数据与slot绑定

然后利用 slot-scope获取到与slot绑定的数据，此处的data为自己定义的，是一个对象

 
        {{ data.msg }}
      

完整案例代码如下：

 

    
      
        {{ data.msg }}
      
    
  
  

3.v-slot指令(Vue 2.6)

从 vue2.6 开始，Vue 为具名插槽和作用域插槽引入了一个全新的语法，即v-slot 指令。目的就是想统一 slot 和 scope-slot 语法，使代码更加规范和清晰。
具体使用如下：
1.插槽的名字现在通过 v-slot:slotName 这种形式来使用，如下。

有一个 默认的名称default

但是该默认的名字，往往省略不写

2.此处需要注意的是， v-slot 只能添加到