vue2.6之后的 v-slot插槽

1、背景

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

2、作用

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

3、具名插槽的用法示例

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

具名插槽的缩写 例： v-slot: header 缩写为 #header，注意#后面必须有值，如果是默认的插槽，缩写为#default。
默认插槽，不写<template v-slot:default ></template>，即不包括在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:default>   // 这个可以省略
      <p>A paragraph for the main content.</p>   
      <p>And another one.</p>
  //</template>   // 这个可以省略

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

4、插槽的默认内容

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

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

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

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

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

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

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

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

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

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

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

// 其实完整写法如下：（引入多个插槽时，一一对应即可）
<current-user>
  // <template #default="slotProps">     // 这里把v-slot:缩写为#，
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

参考链接：https://cn.vuejs.org/v2/guide/components-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9