插槽 Slots

组件用来接收模板内容

插槽内容与出口

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

插槽内容可以是任意合法的模板内容，不局限于文本。例如我们可以传入多个元素，甚至是组件：

  Click me!
  

渲染作用域

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

{{ message }}
{{ message }}

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

插槽内容无法访问子组件的数据。

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

默认内容

在外部没有提供任何内容的情况下，可以为插槽指定默认内容。

组件

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

Submit

如果写入内容

Save

则会被渲染为

Save

具名插槽

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

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

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

使用具名插槽

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