插槽

和 HTML 元素一样，我们希望可以向一个组件标签内传递内容，像这样：

  1.  <Child>文章标题</Child>

我们希望“文章标题”四个字能插入到Child组件中，但是运行代码后会发现，Child组件中什么都不会有。因为在 Vue 中，并不支持这样往组件中添加内容的语法。
但是没关系，Vue 中提供了另外一个东西 —— 插槽元素<slot>

一、基础语法

二、插槽内容

<slot>元素作为插槽承载内容的出口。也就是说，我们从组件标签中传递的内容，会显示在<slot>标签所在位置。
例如我们在Child.vue组件中设置如下：

  1. <slot></slot>
  2. <h2>子组件自己的内容</h2>

当我们再使用Child.vue组件时：

  1. <Child>
  2.     <h1>父组件传递给插槽的内容</h1>
  3. </Child>

说明：插槽内可以包含任何模板代码，包括 HTML，甚至是其它的组件。

三、后备内容（默认值）

后备内容，就是指在设置插槽的时候，可以直接在<slot>元素中为插槽设置默认的内容。如果外部没有插入内容，插槽的默认值就会渲染出来。
例如我们在Child.vue组件中设置如下：

  1. <slot>这是插槽的默认内容</slot>
  2. <h2>子组件自己的内容</h2>

当我们再使用Child.vue组件时，不传递任何插槽内容：

  1.  <Child></Child>

四、具名插槽

具名插槽指的就是给插槽取名字。
<slot>元素提供了一个特殊的特性：name。这个特性可以通过给插槽命名的方式来定义额外的插槽：

  1. <slot name="before"></slot>
  2. <h2>子组件自己的内容</h2>
  3. <slot name="after"></slot>

在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称：

  1. <Child>
  2.     <template v-slot:before>
  3.         <h1>父组件传递给插槽的内容(前面)</h1>
  4.     </template>
  5.     <template v-slot:after>
  6.         <h1>父组件传递给插槽的内容(后面)</h1>
  7.     </template>
  8. </Child>

注意：**v-slot**指令只能用在组件或**<template>**元素身上。