7.插槽

组件的最大特性就是 重用 ，而用好插槽能大大提高组件的可重用能力。

**插槽的作用：**父组件向子组件传递内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JI8FZpIm-1672136742834)(assets/34.png)]

通俗的来讲，插槽无非就是在 子组件 中挖个坑，坑里面放什么东西由 父组件 决定。

插槽类型有：

• 单个（匿名）插槽
• 具名插槽
• 作用域插槽

7.1 - 插槽内容与插口

在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。

这里有一个 组件，可以像这样使用：

Click me! 

而 的模板是这样的：

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WTdnwc4R-1672136742834)(assets/slots.dbdaf1e8.png)]

最终渲染出的 DOM 是这样：

Click me!

完整案例：06_slot/42_slot.html

点击注册登录

7.2渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。举例来说：

{{ message }}
{{ message }}

这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。换言之：

父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

完整案例：06_slot/43_slot_render_scope.html

{{ msg }}{{ msg }}

7.3默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容。比如有这样一个 组件：

如果我们想在父组件没有提供任何插槽内容时在 内渲染“Submit”，只需要将“Submit”写在 标签之间来作为默认内容：

Submit

现在，当我们在父组件中使用 且没有提供任何插槽内容时：

“Submit”将会被作为默认内容渲染：

Submit

但如果我们提供了插槽内容：

Save

那么被显式提供的内容会取代默认内容：

Save

完整案例：06_slot/44_slot_default.html

点击注册

7.4具名插槽（v-slot属性，#简写）

有时在一个组件中包含多个插槽出口是很有用的。举例来说，在一个 组件中，有如下模板：

对于这种场景， 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 出口会隐式地命名为“default”。

在父组件中使用 时，我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了：

要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的