vue2.6之后的 v-slot插槽

1、背景

在 vue2.6.0 中，引入了v-slot 指令，取代了 slot 和 slot-scope 属性，
并且v-slot只能使用在template上。

2、作用

在引入组件时，通过在template元素上使用v-slot实现了内容的封装，
而在使用时则将 元素作为封装元素的出口。

3、具名插槽的用法示例

一个不带 name 的 出口会带有隐含的名字“default”，

具名插槽的缩写 例： v-slot: header 缩写为 #header，注意#后面必须有值，如果是默认的插槽，缩写为#default。
默认插槽，不写，即不包括在template内的就是默认插槽的内容

//定义组件A，引入插槽
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>      // 这里没定义name，那其name就是default.
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

// 在其它组件内，引入组件A时，定义slot插槽的内容，引入进写法如下
<A>
  <template #header>
    <h1>Here might be a page title</h1>  // 这个插槽内是html
  </template>
    
  // 这里没有包含在template,其默认的就是name为default的slot
  //    // 这个可以省略

  <template v-slot:footer>
       <B></B>                  // 这个插槽内是另一个组件B
  </template>
</A>

4、插槽的默认内容

在slot中写入内容，则可作为引入组件时，若未设置相应插槽时，该插槽的默认内容

// 定义一个  组件
<button type="submit">
  <slot>Submit</slot>
</button>

//引入组件，没有定义插槽内容，则使用slot中的默认内容，渲染为
// Submit 
<submit-button></submit-button>   

//引入组件，定义插槽内容，则替换默认内容，渲染为
//  Save 
<submit-button>  Save </submit-button>

5、在父组件调用子组件，引入子组件时的插槽处，使用子组件的数据

在父组件内定义插槽时，插槽内可以访问到父组件内的数据，无法访问到子组件内的数据。

而在子组件为插槽定义默认内容时，只可以访问到子组件内的数据，如果想访问父组件内的数据时，当然可以通过父组件传递给子组件数据的方法进行访问。

父级模板里的所有内容都是在父级作用域中编译的；
子模板里的所有内容都是在子作用域中编译的。

• 在子组件的slot处v-bind绑定属性
• 在你组件的template中定义slot时，使用 v-slot:插槽名 = 插槽处绑定的属性，即可

// 子组件 
<span>
  <slot v-bind:user="user">
    {
     {
      user.lastName }}
  </slot>
</span>

// 在父组件内引入子组件 ，只有默认插槽时，缩写为
<current-user v-slot:default="slotProps">
  {
     {
      slotProps.user.firstName }}
</current-user>

// 其实完整写法如下：（引入多个插槽时，一一对应即可）
<current-user>
  //