具名插槽

自 2.6.0 起有所更新。已废弃的使用 slot 特性的语法在这里。

有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：

  1. <div class="container">
  2.   <header>
  3.     <!-- 我们希望把页头放这里 -->
  4.   </header>
  5.   <main>
  6.     <!-- 我们希望把主要内容放这里 -->
  7.   </main>
  8.   <footer>
  9.     <!-- 我们希望把页脚放这里 -->
  10.   </footer>
  11. </div>

对于这样的情况，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

  1. <div class="container">
  2.   <header>
  3.     <slot name="header"></slot>
  4.   </header>
  5.   <main>
  6.     <slot></slot>
  7.   </main>
  8.   <footer>
  9.     <slot name="footer"></slot>
  10.   </footer>
  11. </div>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

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

  1. <base-layout>
  2.   <template v-slot:header>
  3.     <h1>Here might be a page title</h1>
  4.   </template>
  6.   <p>A paragraph for the main content.</p>
  7.   <p>And another one.</p>
  9.   <template v-slot:footer>
  10.     <p>Here's some contact info</p>
  11.   </template>
  12. </base-layout>

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

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

  1. <base-layout>
  2.   <template v-slot:header>
  3.     <h1>Here might be a page title</h1>
  4.   </template>
  6.   <template v-slot:default>
  7.     <p>A paragraph for the main content.</p>
  8.     <p>And another one.</p>
  9.   </template>
  11.   <template v-slot:footer>
  12.     <p>Here's some contact info</p>
  13.   </template>
  14. </base-layout>

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

  1. <div class="container">
  2.   <header>
  3.     <h1>Here might be a page title</h1>
  4.   </header>
  5.   <main>
  6.     <p>A paragraph for the main content.</p>
  7.     <p>And another one.</p>
  8.   </main>
  9.   <footer>
  10.     <p>Here's some contact info</p>
  11.   </footer>
  12. </div>

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