vue提供了一种将父组件的内容与子组件的模板集成在一起的方法。 内容分发通过slot插槽实现。
缺省情况下，写入组件标记内部的内容将被替换。 如果要在组件模板中使用这些内容，请在相应的位置写slot标签。 此slot标签表示这些内容。
匿名插槽
如果在父组件中使用子组件，则在子组件标签内部写入的内容可以在子组件模板中使用
slot切口插入的内容我是aaa组件
图像
命名凹口
可以通过设置slot属性来命名父组件在子组件的标签中写入的多个内容。 使用具有name属性的" slot "标签将相应的slot放在子组件模板中，如果slot不存在，则会显示在" slot "标签中所写的内容。
在插槽上方用name属性指定插槽名称，如果使用，则用slot='插槽名称'指定。
以上内容
使用以下内容
我是aaa汇编的
图像
通过slot插槽，您可以基于现有模板定制更多不同的组件。
作用域插槽
要在父组件中访问子组件中的数据，必须将定制属性动态绑定到子组件中的元素，将数据传递给定制属性，然后通过slot传递给父组件进行使用。
绑定到元素的属性称为slot props。 对于父组件，现在可以使用slot-scope将包含所有插槽的prop的对象命名为prop。 然后，可以通过prop使用子组件中的数据。
老师姓名： {{prop.teacher.name}}老师年龄： {{prop.teacher.age}}
图像
v-slot
v-slot命令是从Vue 2.6.0引入的，提供了更支持slot和slot-scope特性的API替代方案。 在接下来的2.x版本中，slot和slot-scope功能仍受支持，但已被官方淘汰，不会显示在Vue 3中。
使用v-slot重构上面的代码。
老师姓名： {{prop.teacher.name}}老师年龄： {{prop.teacher.age}}
没有name的出口有一个默认名称。 使用时可以简化为v-slot='prop "。
命名凹口
在子组件中，在name属性中将切口设置为名称
父组件使用名为v-slot:的切口
学生姓名： {{prop.student.name}}学生年龄： {{prop.student.age}}
在父组件中多次调用子组件时，可以通过设置不同的样式来设置子组件中数据的显示格式。
亲子组件通讯案例
还可以使用属性绑定和v-slot来循环呈现子组件中父组件中的数据
首先在父程序集上定义一组数据
数据()。
return{
listData:[
{
名称： ' tome '，
job:'web前端'
(，
{
name: '高大的小虾'，
job:'java '
}
]
}
}
在属性绑定中将数据传递到子组件Home并设置v-slot插槽对象名称。 在这种情况下，可以从插槽内部通过prop访问数据
Home组件接收从父组件传递的data
props:{
数据： {
类型：阵列，
要求：真
}
}
将data传递给slot的自定义属性list
您可以将Child组件插入Home组件的slot插槽中，Child组件通过prop.list循环演示数据，然后通过属性绑定将item传递到Child
用Child组件接收从Home发送来的data
props:{
数据： {
类型：对象，
要求：真
}
}
在页面上用key名称渲染数据
{{data.name}}
{{data.job}}
渲染结果：
图像