插槽：用于在子组件的指定位置插入指定内容，类似在电梯里挂的若干广告显示屏，可以给指定的位置传入指定的广告
使用场景
多个页面用到同一组件，但展示的内容不一样，如 Tabs（页签）， Modal （模态框），Dialog（对话框）等
单插槽（匿名/默认插槽）
父组件中（ 此时的 ）
<Child> <template> <p>身体</p> </template> </Child>
或（ 默认插槽的 template 标签可以省略）
<Child> <p>身体</p> </Child>
子组件中
<div> <p>头</p> <slot> 默认内容 （当父组件标签内无内容时，会显示！） </slot> <p>脚</p> </div>
多插槽（具名插槽）
- 通过 slot 属性或 v-slot 指令（可简写为 # ）指定插槽的位置，支持中文。
- slot 和v-slot 可以用在template标签上（推荐），也可以直接用于 html 标签上。
父组件
<Child> <template slot='head'> 头 </template> <template slot='foot'> 脚 </template> </Child>
或
<Child> <template v-slot:head> 头 </template> <template v-slot:foot> 脚 </template> </Child>
或
<Child> <template #head> 头 </template> <template #foot> 脚 </template> </Child>
子组件中
<div> <slot name="head"></slot> <p>身体</p> <slot name="foot"></slot> </div>
最终页面效果
头 身体 脚
插槽传值（作用域插槽）
子组件可以通过插槽给父组件传值
v-slot 接收参数 （用于 v-slot 指令标记插槽）
子组件中，将变量status动态绑定到slot标签上
<div> <p>头</p> <slot name="body" :status="status"></slot> <p>脚</p> </div>
data(){ return{ status:'健康的' } }
父组件中，通过 v-slot 接收，子组件通过插槽传入的所有变量，都存在slotProps对象中。
<Child> <template v-slot:body="slotProps"> <p>{{slotProps.status}}身体</p> </template> </Child>
slot-scope 接收参数 （用于 slot 属性标记插槽）
子组件
<button> <slot name="插槽1" :info="info"></slot> </button>
data() { return { info: { name: '朝阳' } } }
父组件，通过slot-scope接收子组件通过插槽传入的值（ slot-scope 里的 {} 是进行解构赋值）
<Child> <template slot="插槽1" slot-scope="{info}"> <p>{{info}}</p> </template> </Child>
