作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
默认内容
我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 标签内：
<button type="submit">
<slot>Submit</slot>
</button>
具名插槽
用法
子组件通过向slot里面添加name属性
父组件通过v-slot属性与其对应
具名缩写
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
官网示例
例如对于一个带有如下模板的 组件：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
一个不带 name 的 出口会带有隐含的名字“default”
<base-layout>
<template #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>
注意 v-slot 只能添加在 上 (只有一种例外情况，就在下面)
作用域插槽
之前我们使用插槽，父级作用域和子级作用域是互不干扰的，但是有时候我们想获取子级作用域的值
在这里我们可以做到，子组件通过v-mode:绑定想传给父组件的值，父组件通过v-slot接受
官网示例
子组件（current-user）
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 元素的一个 attribute 绑定上去：
切记这里不是prop传值，是slot的语法，可以把slot所在的 组件的user传递上去
<span>
<slot v-bind:user="user">
{
{
user.lastName }}
</slot>
</span>
父组件
绑定在 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：
<current-user>
<template v-slot:default="slotProps">
{
{
slotProps.user.firstName }}
</template>
</current-user>
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。
独占默认插槽的缩写语法
上面所写用到了v-slot，我们在这里探讨一下
<current-user v-slot:default="slotProps">
{
{
slotProps.user.firstName }}
</current-user>
当然我们也可以简写，因为就一个，可以使用默认
<current-user v-slot="slotProps">
{
{
slotProps.user.firstName }}
</current-user>
注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确
解构插槽 Prop
动态插槽名
v-slot也可以绑定一些动态的值
<base-layout>
<template v-slot:[动态的值]>
...
</template>
</base-layout>