具名插槽

有的时候我们需要多个插槽来完成需求，例如：现在有一个模板组件<base-layout>组件

<div class="container">  
  <header>  
    <!-- 我们希望把页头放这里 -->  
  </header>  
  <main>  
    <!-- 我们希望把主要内容放这里 -->  
  </main>  
  <footer>  
    <!-- 我们希望把页脚放这里 -->  
  </footer>  
</div>

对于这种情况，<slot>也提供了一个特殊的attribute：name。这个属性可以用来使用对应的那个插槽

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

一个不带 name 的 <slot> 出口会带有隐含的名字“default”，也就是默认插槽

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

<base-layout>
  <template v-slot:header>
    <h1>我是 header</h1>
  </template>
  
  <p>我是内容1</p>
  <p>我是内容2</p>
  
  <template v-slot:footer>
    <p>我是底部信息</p>
  </template>
</base-layout>

现在<template>元素中的所有内容都会被传入相应的插槽。任何没有被包裹在带有v-slot的<template>中的内容都会被视为默认插槽的内容

然而，你希望更明确一些，仍然可以在<template>中包裹默认插槽的内容

<base-layout>
  <template v-slot:header>
    <h1>我是 header</h1>
  </template>
  
  <template v-slot:default>
    <p>我是内容1</p>
    <p>我是内容2</p>
  </template>
  
  <template v-slot:footer>
    <p>我是底部信息</p>
  </template>
</base-layout>

以上任何一种写法都会被渲染出：

<div class="container">  
  <header>  
    <h1>我是 header</h1>
  </header>  
  <main>  
    <p>我是内容1</p>
    <p>我是内容2</p>
  </main>  
  <footer>  
    <p>我是底部信息</p>
  </footer>  
</div>

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。