# 插槽
> 该页面假设你已经阅读过了[组件基础](https://cn.vuejs.org/v2/guide/components.html)。如果你还对组件不太了解，推荐你先阅读它。
> 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即`v-slot`指令)。它取代了`slot`和`slot-scope`这两个目前已被废弃但未被移除且仍在[文档中](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)的特性。新语法的由来可查阅这份[RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。
## [插槽内容](https://cn.vuejs.org/v2/guide/components-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9 "插槽内容")
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自[Web Components 规范草案](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)，将`<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>`**没有**包含一个`<slot>`元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
## [编译作用域](https://cn.vuejs.org/v2/guide/components-slots.html#%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F "编译作用域")
当你想在一个插槽中使用数据时，例如：
~~~
<navigation-link url="/profile">
Logged in as {{ user.name }}
</navigation-link>
~~~
该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”)，而**不能**访问`<navigation-link>`的作用域。例如`url`是访问不到的：
~~~
<navigation-link url="/profile">
Clicking here will send you to: {{ url }}
<!--
这里的 `url` 会是 undefined，因为 "/profile" 是
_传递给_ <navigation-link> 的而不是
在 <navigation-link> 组件*内部*定义的。
-->
</navigation-link>
~~~
作为一条规则，请记住：
> 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
## [后备内容](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%90%8E%E5%A4%87%E5%86%85%E5%AE%B9 "后备内容")
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个`<submit-button>`组件中：
~~~
<button type="submit">
<slot></slot>
</button>
~~~
我们可能希望这个`<button>`内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在`<slot>`标签内：
~~~
<button type="submit">
<slot>Submit</slot>
</button>
~~~
现在当我在一个父级组件中使用`<submit-button>`并且不提供任何插槽内容时：
~~~
<submit-button></submit-button>
~~~
后备内容“Submit”将会被渲染：
~~~
<button type="submit">
Submit
</button>
~~~
但是如果我们提供内容：
~~~
<submit-button>
Save
</submit-button>
~~~
则这个提供的内容将会被渲染从而取代后备内容：
~~~
<button type="submit">
Save
</button>
~~~
## [具名插槽](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD "具名插槽")
> 自 2.6.0 起有所更新。已废弃的使用`slot`特性的语法在[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)。
有时我们需要多个插槽。例如对于一个带有如下模板的`<base-layout>`组件：
~~~
<div class="container">
<header>
<!-- 我们希望把页头放这里 -->
</header>
<main>
<!-- 我们希望把主要内容放这里 -->
</main>
<footer>
<!-- 我们希望把页脚放这里 -->
</footer>
</div>
~~~
对于这样的情况，`<slot>`元素有一个特殊的特性：`name`。这个特性可以用来定义额外的插槽：
~~~
<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>
~~~
现在`<template>`元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有`v-slot`的`<template>`中的内容都会被视为默认插槽的内容。
然而，如果你希望更明确一些，仍然可以在一个`<template>`中包裹默认插槽的内容：
~~~
<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`只能添加在一个`<template>`上**(只有[一种例外情况](https://cn.vuejs.org/v2/guide/components-slots.html#%E7%8B%AC%E5%8D%A0%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99%E8%AF%AD%E6%B3%95))，这一点和已经废弃的[`slot`特性](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)不同。
## [作用域插槽](https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD "作用域插槽")
> 自 2.6.0 起有所更新。已废弃的使用`slot-scope`特性的语法在[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95)。
有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的`<current-user>`组件：
~~~
<span>
<slot>{{ user.lastName }}</slot>
</span>
~~~
我们想让它的后备内容显示用户的名，以取代正常情况下用户的姓，如下：
~~~
<current-user>
{{ user.firstName }}
</current-user>
~~~
然而上述代码不会正常工作，因为只有`<current-user>`组件可以访问到`user`而我们提供的内容是在父级渲染的。
为了让`user`在父级的插槽内容可用，我们可以将`user`作为一个`<slot>`元素的特性绑定上去：
~~~
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
~~~
绑定在`<slot>`元素上的特性被称为**插槽 prop**。现在在父级作用域中，我们可以给`v-slot`带一个值来定义我们提供的插槽 prop 的名字：
~~~
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
~~~
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为`slotProps`，但你也可以使用任意你喜欢的名字。
### [独占默认插槽的缩写语法](https://cn.vuejs.org/v2/guide/components-slots.html#%E7%8B%AC%E5%8D%A0%E9%BB%98%E8%AE%A4%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99%E8%AF%AD%E6%B3%95 "独占默认插槽的缩写语法")
在上述情况下，当被提供的内容*只有*默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把`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>`的语法：
~~~
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
<template v-slot:other="otherSlotProps">
...
</template>
</current-user>
~~~
### [解构插槽 Prop](https://cn.vuejs.org/v2/guide/components-slots.html#%E8%A7%A3%E6%9E%84%E6%8F%92%E6%A7%BD-Prop "解构插槽 Prop")
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
~~~
function (slotProps) {
// 插槽内容
}
~~~
这意味着`v-slot`的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 ([单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)或[现代浏览器](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9))，你也可以使用[ES2015 解构](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E8%A7%A3%E6%9E%84%E5%AF%B9%E8%B1%A1)来传入具体的插槽 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>
~~~
## [动态插槽名](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD%E5%90%8D "动态插槽名")
> 2.6.0 新增
[动态指令参数](https://cn.vuejs.org/v2/guide/syntax.html#%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0)也可以用在`v-slot`上，来定义动态的插槽名：
~~~
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
</base-layout>
~~~
## [具名插槽的缩写](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD%E7%9A%84%E7%BC%A9%E5%86%99 "具名插槽的缩写")
> 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>
~~~
## [其它示例](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B6%E5%AE%83%E7%A4%BA%E4%BE%8B "其它示例")
**插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。**这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
例如，我们要实现一个`<todo-list>`组件，它是一个列表且包含布局和过滤逻辑：
~~~
<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-list>`组件的时候，我们可以选择为 todo 定义一个不一样的`<template>`作为替代方案，并且可以从子组件获取数据：
~~~
<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](https://github.com/Akryum/vue-virtual-scroller)、[Vue Promised](https://github.com/posva/vue-promised)和[Portal Vue](https://github.com/LinusBorg/portal-vue)等库。
## [废弃了的语法](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%BA%9F%E5%BC%83%E4%BA%86%E7%9A%84%E8%AF%AD%E6%B3%95 "废弃了的语法")
> `v-slot`指令自 Vue 2.6.0 起被引入，提供更好的支持`slot`和`slot-scope`特性的 API 替代方案。`v-slot`完整的由来参见这份[RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。在接下来所有的 2.x 版本中`slot`和`slot-scope`特性仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。
### [带有`slot`特性的具名插槽](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%B8%A6%E6%9C%89-slot-%E7%89%B9%E6%80%A7%E7%9A%84%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD "带有 slot 特性的具名插槽")
> 自 2.6.0 起被废弃。新推荐的语法请查阅[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD)。
在`<template>`上使用特殊的`slot`特性，可以将内容从父级传给具名插槽 (把[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD)提到过的`<base-layout>`组件作为示例)：
~~~
<base-layout>
<template 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 slot="footer">
<p>Here's some contact info</p>
</template>
</base-layout>
~~~
或者直接把`slot`特性用在一个普通元素上：
~~~
<base-layout>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</base-layout>
~~~
这里其实还有一个未命名插槽，也就是**默认插槽**，捕获所有未被匹配的内容。上述两个示例的 HTML 渲染结果均为：
~~~
<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>
~~~
### [带有`slot-scope`特性的作用域插槽](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%B8%A6%E6%9C%89-slot-scope-%E7%89%B9%E6%80%A7%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD "带有 slot-scope 特性的作用域插槽")
> 自 2.6.0 起被废弃。新推荐的语法请查阅[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD)。
在`<template>`上使用特殊的`slot-scope`特性，可以接收传递给插槽的 prop (把[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD)提到过的`<slot-example>`组件作为示例)：
~~~
<slot-example>
<template slot="default" slot-scope="slotProps">
{{ slotProps.msg }}
</template>
</slot-example>
~~~
这里的`slot-scope`声明了被接收的 prop 对象会作为`slotProps`变量存在于`<template`\> 作用域中。你可以像命名 JavaScript 函数参数一样随意命名`slotProps`。
这里的`slot="default"`可以被忽略为隐性写法：
~~~
<slot-example>
<template slot-scope="slotProps">
{{ slotProps.msg }}
</template>
</slot-example>
~~~
`slot-scope`特性也可以直接用于非`<template>`元素 (包括组件)：
~~~
<slot-example>
<span slot-scope="slotProps">
{{ slotProps.msg }}
</span>
</slot-example>
~~~
`slot-scope`的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式。这意味着在支持的环境下 ([单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)或[现代浏览器](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9))，你也可以在表达式中使用[ES2015 解构](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E8%A7%A3%E6%9E%84%E5%AF%B9%E8%B1%A1)，如下：
~~~
<slot-example>
<span slot-scope="{ msg }">
{{ msg }}
</span>
</slot-example>
~~~
使用[这里](https://cn.vuejs.org/v2/guide/components-slots.html#%E5%85%B6%E5%AE%83%E7%A4%BA%E4%BE%8B)描述过的`<todo-list>`作为示例，与它等价的使用`slot-scope`的代码是：
~~~
<todo-list v-bind:todos="todos">
<template slot="todo" slot-scope="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</todo-list>
~~~
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- 移动客户端开发
- uni-app基础
- 快速入门程序
- 单页程序
- 底部Tab导航
- Vue语法基础
- 模版语法
- 计算属性与侦听器
- Class与Style绑定
- 样式与布局
- Box模型
- Flex布局
- 内置指令
- 基本指令
- v-model与表单
- 条件渲染指令
- 列表渲染指令v-for
- 事件与自定义属性
- 生命周期
- 项目实践
- 学生实验
- 贝店商品列表
- 加载更多数据
- 详情页面
- 自定义组件
- 内置组件
- 表单组件
- 技术专题
- 状态管理vuex
- Flyio
- Mockjs
- SCSS
- 条件编译
- 常用功能实现
- 上拉加载更多数据
- 数据加载综合案例
- Teaset UI组件库
- Teaset设计
- Teaset使用基础
- ts-tag
- ts-badge
- ts-button
- ta-banner
- ts-list
- ts-icon
- ts-load-more
- ts-segmented-control
- 代码模版
- 项目实践
- 标签组件
- 失物招领客户端原型
- 发布页面
- 检索页面
- 详情页面
- 服务端开发技术
- 服务端开发环境配置
- Koajs快速入门
- 快速入门
- 常用Koa中间件介绍
- 文件上传
- RestfulApi
- 一个复杂的RESTful例子
- 使用Mockjs生成模拟数据
- Thinkjs快速入门
- MVC模式
- Thinkjs介绍
- 快速入门
- RESTful服务
- RBAC案例
- 关联模型
- 应用开发框架
- 服务端开发
- PC端管理界面开发
- 移动端开发
- 项目实践
- 失物招领项目
- 移动客户端UI设计
- 服务端设计
- 数据库设计
- Event（事件）
- 客户端设计
- 事件列表页面
- 发布页面
- 事件详情页面
- API设计
- image
- event
- 微信公众号开发
- ui设计规范