<slot>插槽 一般使用组件时 在标签内填写的内容是不被编译的，当想要在父级使用组件时能填写内容则需要在定义组件时添加<slot></slot>标签，在插槽内可以给上默认内容，当父级调用时没有给内容时也就有了默认的值
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
具名插槽
在需要多个插槽的模板中，为了区分插槽，使用name属性，然后在父级使用组件时用v-slot:header区分要为哪个插槽添加内容，最后没有对应名字的就是子组件没有给名字的插槽要对应的内容。
<template v-slot:header> <h1>Here might be a page title</h1> </template>
作用域插槽
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
所以当在父级模板中使用子组件时添加插槽内容时，想要用子组件中的data数据是行不通的，作用域的限制，想要访问时，需要在子组件：
<span> <slot :user="user"> {{ user.lastName }} </slot> </span>
是的像极了props组件的传值，这个是理解为反向，
父：自定义一个字段slotProps对象接收传过来的插槽prop
<template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template>
当只有默认插槽传插槽prop时可以不用另外起一个template标签，在父组件中直接把v-slot:default="slotProps" 写在子组件的应用上
如果不想自定义字段接收插槽prop可以用解构按需引入v-slot="{ user }"
也能重命名与给定默认值（值为undefined时 ）v-slot="{ user: person }" v-slot="{ user = { firstName: ‘Guest‘ } }"
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：这个动态值是在父组件的作用域
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template></base-layout>
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
原文地址：https://www.cnblogs.com/zhenxiang/p/11115850.html