Vue 实现了一套内容分发的 API，由 <slot> 元素作为承载分发内容的出口。

slot

首先说说slot

vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现。

在组件标签内部写入的内容默认的会被替换掉，如果想要在组件的模板里使用这些内容，就在对应的位置写上slot标签，这个slot标签就代表着这些内容。

匿名插槽

在父组件中使用子组件的时候，在子组件标签内部写的内容，在子组件的模板中可以通过<slot></slot>来使用

<div id = "app">
    <aaa>
        <h3>slot槽口插入的内容</h3>
    </aaa>
</div>

<template id="aaa">
    <div class = "aaa">
        <slot></slot>
        <p>我是aaa组件</p>
    </div>
</template>

具名插槽

父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过使用带有name属性的slot标签来放置对应的slot，当slot不存在的时候，slot标签内写的内容就出现。

slot上面通过name属性指定槽口名称，然后使用的时候通过slot="槽口名称"。

<div id = "app">
    <aaa>
        <!-- <h3>slot槽口插入的内容</h3> -->
        <p slot = "s1">在上面的内容</p>
        <p slot = "s2">在下面的内容</p>
    </aaa>
</div>

<template id="aaa">
    <div class = "aaa">
        <slot name = "s1"></slot>
        <p>我是aaa组件</p>
        <slot name = "s2"></slot>
    </div>
</template>

slot插槽让我们在原有模版的基础上，定制更加多样化的组件。

作用域插槽

当我们想在父组件中访问子组件内部的一些数据时，就需要在子组件内部的<slot>元素上动态绑定一个自定义属性，将数据传递到自定义属性上，通过slot传递给父组件使用。
<slot :teacher="teacher"></slot>
绑定到<slot>元素上的属性我们称之为slot props。现在，在父组件中我们可以通过slot-scope给包含所有插槽 prop 的对象命名为prop，之后就可以通过prop来使用子组件中的数据了。

<template slot-scope="prop">
      老师姓名：{{prop.teacher.name}} 老师年龄：{{prop.teacher.age}}
</template>

slot总结

• 在组件内部任意地方使用 <slot name='value'></slot> 标签挖坑.
• 挖坑语法(子组件定义): <slot name='slotname'>默认值</slot>
• 填坑语法(父组件使用): <div slot='slotname'>任意内容(字符串,数据,其他组件等)</div> .. 注意,使用方法是<div slot> 而不是 <slot>
• 最重要的是,我们可以利用slot,事先不建立组件和组件之间的依赖关系,完全利用 slot 这个抽象层,把坑挖好即可.

v-slot

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope 特性的 API 替代方案。在接下来所有的 2.x 版本中slot 和 slot-scope 特性仍会被支持，但已经被官方废弃，且不会出现在 Vue 3 中。

现在我们使用 v-slot 重构代码：

匿名插槽

<a v-slot:default="prop">
      老师姓名：{{prop.teacher.name}} 老师年龄：{{prop.teacher.age}}
</a>

<div class = "aaa">
     <slot :teacher="teacher"></slot>
</div>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”，使用时可以简化为v-slot:default="prop“。

具名插槽

子组件中通过name属性给槽口设定名称

<slot name="student" :student='student'></slot>

父组件中通过v-slot:名称的方式来使用具名槽口

<template v-slot:student="prop">
      学生姓名：{{prop.student.name}} 学生年龄：{{prop.student.age}}
</template>

作用域插槽

通过v-slot:插槽名=“变量名”的形式将子组件slot上的所有属性接收为一个集合。
父页面

<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 

slotProps 可以随意命名
slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"以及v-bind:test="test"

子组件

<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },

如果不打算使用插槽的作用域传递数据，则可以直接写成：

 <template v-slot:todo >
   <div></div>
 </template>