持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

前言

之前的章节我们介绍过，如果想给子组件传递模板片段，并让其在子组件中进行渲染，可以通过插槽来实现。也就是在子组件中想插入父组件模板代码的位置上添加 slot 标签即可。

而通过使用插槽，可以让我们更好的复用组件，并可以使其的ui保持一致，不仅提高了组件的灵活性，还使得内容的更加的自定义化。

而随着业务的不断复杂化，对于子组件的要求也可能变得更高。在一个组件中，对于插槽的使用可能需要在其多个位置中插入父组件的模板片段。而对于这种情况，我们完全就可以通过具名插槽的形式，使其模板片段插入到指定位置。

那我们要如何使用他呢？让我们来具体看一看吧。

具名插槽

比如我们有一个 layout 组件，我们想分别在其头部、主体以及底部插入相同的内容。

<div class="layout">
  <header>
    <!-- 插入头部的内容 -->
  </header>
  <main>
    <!-- 插入主体的内容 -->
  </main>
  <footer>
    <!-- 插入底部的内容 -->
  </footer>
</div>

我们可以在每个位置插入 slot 标签，并给每个slot一个name属性，用以作为相应插槽的Id，来让我们更好的插入要渲染的内容，也就是我们开头说的具名插槽。

<div class="layout">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

要想正确的使用具名插槽的话，还需要使用 template标签，并在上面添加 v-slot指令以及指令绑定的具名插槽的名词。

<Layout>
  <template v-slot:header>
    <!-- 插入头部的内容 -->
  </template>
</Layout>

当然，我们也可以使用 v-slot的简写形式：#，所以可以写成这样：

<Layout>
  <template #:header>
    <!-- 插入头部的内容 -->
  </template>
</Layout>

下面，我们完成全部代码：

<Layout>
  <template #header>
    <h1>头部内容</h1>
  </template>

 <p>主体内容</p>

  <template #footer>
    <p>底部内容</p>
  </template>
</Layout>

而最终渲染出来的HTML效果，将是如下样子：

<div class="layout">
  <header>
    <h1>头部内容</h1>
  </header>
  <main>
    <p>主体内容</p>
  </main>
  <footer>
    <p>底部内容</p>
  </footer>
</div>

需要注意的是，当父组件传递的模板片段没有指定具名插槽的话，会默认插入到，没有绑定name的slot标签上。