Vue 插槽slot和作用域插槽slot-scope

什么插槽

官网说明：

在 2.6.0中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

• 简单的概念：插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。slot最核心的是显示不显示和怎样显示。

• 非插槽模板html模板:
  指的是 div、span、ul、table这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制；

• 插槽模板slot
  它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。

单个插槽|默认插槽 | 匿名插槽

• 概念：
  单个插槽是vue的官方叫法，是默认插槽，也是匿名插槽。因为它不用设置name属性。
  单个插槽， 一个组件中只能有一个该类插槽。具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

• 样例：
  如果父模板传递了值过去，则插槽占位处显示父组件传递过去的值，否则默认为子组件插槽的内容，一般情况为空。

父模板


     
这里是父组件
    有bug发生
    有一个警告
    


子组件
  Vue.component('alert-box', {
      template: `
        
 ERROR:
        子组件插槽默认内容
    
    `
    });
展示结果：
ERROR: 有bug发生
ERROR: 有一个警告
ERROR: 子组件插槽默认内容





子组件

具名插槽

• 概念：
  插槽加了name属性，具名插槽可以在一个组件中出现N次。出现在不同的位置。总之，存在多个具名插槽的情况下，只需要找准该slot="name"下的slot即可，将对应的父组件内容传递到子组件slot占位处。父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。
• 样例：

父组件

      
标题信息
      
主要内容1
      
主要内容2
      
底部信息


子组件：
  Vue.component('base-layout', {
      template: `
      

          有name的插槽可以在该组件中存在多次
          

          
 
          

      
      `
    });

展示结果：
标题信息
主要内容1
主要内容2
底部信息

作用域插槽 | 带数据的插槽

作用域插槽：在slot上面绑定数据。自 2.6.0 起有所更新。已废弃的使用 slot-scope特性的语法。官网介绍新版
slot-scope 声明了被接收的prop对象会作为 slotProps变量存在于