vue内自定义组件时不可避免碰见slot，会使用slot 知道slot是组件插槽，可以用来根据名称在组件的指定dom节点插入指定内容，使用很方便。
默认插槽
<test-btn>
<span>it</span>
</test-btn>
test-btn组件内：
<template>
<div>
<span>learn</span>
<slot></slot>
</div>
</template>
页面会显示’it’
具名插槽
<test-btn>
<span slot="first">first</span>
<span slot="second">second</span>
</test-btn>
test-btn组件内：
<template>
<div>
<slot name="first"></slot>
<span>learn</span>
<slot name="second"></slot>
</div>
</template>
将显示"first" “learn” “second”。
以上属于即将被废弃的slot用法。
vue自2.6.0起引入了v-slot
v-solt用来统一slot和slot-scope语法。
<navigation-link url="/profile">
Your Profile
</navigation-link>
然后你在 的模板中可能会写为：
<a v-bind:href="url" class="nav-link">
<slot></slot>
</a>
当组件渲染的时候， 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：
<navigation-link url="/profile">
<!-- 添加一个 Font Awesome 图标 -->
<span class="fa fa-user"></span>
Your Profile
</navigation-link>
甚至其它的组件：
<navigation-link url="/profile">
<!-- 添加一个图标的组件 -->
<font-awesome-icon name="user"></font-awesome-icon>
Your Profile
</navigation-link>
如果 没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
编译作用域
当你想在一个插槽中使用数据时，例如：
<navigation-link url="/profile">
Logged in as {
{
user.name }}
</navigation-link>
该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”)，而不能访问 的作用域。例如 url 是访问不到的：
<navigation-link url="/profile">
Clicking here will send you to: {
{
url }}
<!-- 这里的 `url` 会是 undefined，因为 "/profile" 是
_传递给_ <navigation-link> 的而不是
在 <navigation-link> 组件*内部*定义的。
-->
</navigation-link>
作为一条规则，请记住：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 组件中：
<button type="submit">
<slot></slot>
</button>
我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 标签内：
<button type="submit">
<slot>Submit</slot>
</button>
现在当我在一个父级组件中使用 并且不提供任何插槽内容时：
<submit-button></submit-button>
后备内容“Submit”将会被渲染：
<button type="submit">
Submit
</button>
但是如果我们提供内容：
<submit-button>
Save
</submit-button>
则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit">
Save
</button>
具名插槽
自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。
有时我们需要多个插槽。例如对于一个带有如下模板的 组件：
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
</footer>
</div>
对于这样的情况， 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 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>
现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
然而，如果你希望更明确一些，仍然可以在一个 中包裹默认插槽的内容：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
任何一种写法都会渲染出：
<div class="container">
<header>
<h1>Here might be a page title</h1>
</header>
<main>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</main>
<footer>
<p>Here's some contact info</p>
</footer>
</div>
注意 v-slot 只能添加在一个 上 (只有一种例外情况)，这一点和已经废弃的 slot 特性不同。
作用域插槽
自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。
有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 组件：
<span>
<slot>{
{
user.lastName }}</slot>
</span>
我们想让它的后备内容显示用户的名，以取代正常情况下用户的姓，如下：
<current-user>
{
{
user.firstName }}
</current-user>
然而上述代码不会正常工作，因为只有 组件可以访问到 user 而我们提供的内容是在父级渲染的。
为了让 user 在父级的插槽内容可用，我们可以将 user 作为 元素的一个特性绑定上去：
<span>
<slot v-bind:user="user">
{
{
user.lastName }}
</slot>
</span>
绑定在 元素上的特性被称为插槽 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>
这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：
<current-user v-slot="slotProps">
{
{
slotProps.user.firstName }}
</current-user>
注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
{
{
slotProps.user.firstName }}
<template v-slot:other="otherSlotProps">
slotProps is NOT available here
</template>
</current-user>
只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：
<current-user>
<template v-slot:default="slotProps">
{
{
slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
解构插槽 Prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
function (slotProps) {
// 插槽内容
}
这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
<current-user v-slot="{ user }">
{
{
user.firstName }}
</current-user>
这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：
<current-user v-slot="{ user: person }">
{
{
person.firstName }}
</current-user>
你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：
<current-user v-slot="{ user = { firstName: 'Guest' } }">
{
{
user.firstName }}
</current-user>
动态插槽名
2.6.0 新增
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
具名插槽的缩写
2.6.0 新增
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
<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 #footer>
<p>Here's some contact info</p>
</template>
</base-layout>
然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：
<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
{
{
user.firstName }}
</current-user>
如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：
<current-user #default="{ user }">
{
{
user.firstName }}
</current-user>
其它示例
插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
例如，我们要实现一个 组件，它是一个列表且包含布局和过滤逻辑：
<ul>
<li
v-for="todo in filteredTodos"
v-bind:key="todo.id"
>
{
{
todo.text }}
</li>
</ul>
我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：
<ul>
<li
v-for="todo in filteredTodos"
v-bind:key="todo.id"
>
<!--
我们为每个 todo 准备了一个插槽，
将 `todo` 对象作为一个插槽的 prop 传入。
-->
<slot name="todo" v-bind:todo="todo">
<!-- 后备内容 -->
{
{
todo.text }}
</slot>
</li>
</ul>
现在当我们使用 组件的时候，我们可以选择为 todo 定义一个不一样的 作为替代方案，并且可以从子组件获取数据：
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
<span v-if="todo.isComplete">✓</span>
{
{
todo.text }}
</template>
</todo-list>
这只是作用域插槽用武之地的冰山一角。想了解更多现实生活中的作用域插槽的用法，我们推荐浏览诸如 Vue Virtual Scroller、Vue Promised 和 Portal Vue 等库。
$slots
$slots是组件插槽集，是组件所有默认插槽、具名插槽的集合，可以用来获取当前组件的插槽集。