定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染。
在子组件中通过加入<slot>元素占位，便能够渲染父组件中子组件标签中的内容了。
插槽内容
任何模版代码
HTML代码
其他组件
插槽可以有默认内容，当在父组件中没有提供内容的时候，来进行显示。
<!-- submit-button --> <button type="submit"> <slot>Submit</slot> </button> 1. <submit-button></submit-button> ⬇️ <button type="submit"> Submit </button> 2. <submit-button> Save </submit-button> ⬇️ <button type="submit"> Save </button>
作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
具名插槽
试想，我们有一个带有如下模版的<base-layout>组件
<div> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> </footer> </div>
可以看到，在组件中显示的内容是划分不同的部位的，这个时候就需要使用到<slot>元素的一个特有的属性：name来实现了。这个特性可以用来定义额外的插槽。
<div> <header> <slot></slot> </header> <main> <slot></slot> </main> <footer> <slot></slot> </footer> </div>
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
当然，也可以将默认插槽的内容通过v-slot:default包裹起来。
v-slot 只能添加在一个 <template> 上
作用域插槽
当我们希望能够让插槽内容能够访问子组件中才有的数据时，我们可以将数据作为一个<slot>元素的特性绑定上去
<span> <slot v-bind:user="user"> {{ user.name }} </slot> </span>
绑定在<slot>元素上的特性被称为插槽prop。此时我们在父组件中通过给v-slot带一个值来定义我们提供的插槽prop的名字。
<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.age }} </template> </current-user>
独占默认插槽的缩写语法
当被提供的内容只有默认插槽时，上面的写法可以被简化来写
<!-- 简化版 --> <current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user> <!-- 终极简化版 --> <current-user v-slot="slotProps"> {{ slotProps.user.firstName }} </current-user>
需要注意两点：
简化写法不能和具名插槽混用，作用域不明确
出现多个插槽时，所有插槽都使用完整的基于<template>语法
解构插槽Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
function (slotProps) { // 插槽内容 }
这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user> ⬇️ <current-user v-slot="{ user }"> {{ user.firstName }} </current-user>
使用场景举例
插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。
这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
<base-layout> <template v-slot:[dynamicSlotName]> ... </template> </base-layout>
具名插槽缩写
v-slot可以缩写为#。
缩写方式只有在有参数的时候才可以使用