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