Vue插槽
注意：在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute
我们在这里只讨论v-slot
插槽内容
Vue实现了一套内容分发的 API， 将<slot>元素作为承载分发内容的出口。
它允许你像这样合成组件：
<navigation-link url="/profile">
Your Profile
</navigation-link>
然后你在<navigation-link>的模板中可能会写为：
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
当组件渲染的时候，<slot></slot> 将会被替换为“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>的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
后备内容
简单点说，在<solt></slot>中设置默认值
<button type="submit">
<slot>Submit</slot>
</button>
当我在一个父级组件中使用<submit-button>并且不提供任何插槽内容时,后备内容“Submit”将会被渲染
但当我们提供内容时，默认的值会被替代掉
<submit-button>
Save
</submit-button>
具名插槽
将用处不同的插槽，设置不同的名字，我们就可以将我们指定的内容，填写到我们需要的插槽中
例如对于一个带有如下模板的<base-layout>组件：
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
</footer>
</div>
对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></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>
使用v-slot:的template，会将所有内容传入到指定的插槽中，
没有v-slot的template，会将内容传入到默认的插槽中。
作用域插槽
为了让父组件访问子组件的数据（一般父组件是访问不到子组件的数据）
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
例如，设想一个带有如下模板的<current-user>组件：
<span>
<slot>{{ user.lastName }}</slot>
</span>
我们可能想换掉备用内容，用名而非姓来显示。如下：
<current-user>
{{ user.firstName }}
</current-user>
然而上述代码不会正常工作，因为只有<current-user>组件可以访问到 user，而我们提供的内容是在父级渲染的。
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
绑定在<slot>元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。
在父组件用带值的v-slot定义插槽 prop的名字，像上面的slotProps，这是对象名，
prop可以解构
缩写语法
**跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header： 如果你希望使用缩写的话，你必须始终以明确插槽名取而代之： **
<current-user #default="{ user }">
{{ user.firstName }}
</current-user>
在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 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>
只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
