有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中:
 
<button type="submit">
  <slot></slot>
</button>
 
我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容,我们可以将它放在 <slot> 标签内:
 
<button type="submit">
  <slot>Submit</slot>
</button>
 
现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时:
 
<submit-button></submit-button>
 
后备内容“Submit”将会被渲染:
 
<button type="submit">
  Submit
</button>
 
 
但是如果我们提供内容:
 
<submit-button>
  Save
</submit-button>
 
则这个提供的内容将会被渲染从而取代后备内容:
 
<button type="submit">
  Save
</button>
 
 
具名插槽
有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件:
 
<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>
 
对于这样的情况,<slot> 元素有一个特殊的 attribute:name。这个 attribute 可以用来定义额外的插槽:
 
<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>Here might be a page title</h1>
  </template>
 
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
 
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
 
然而,如果你希望更明确一些,仍然可以在一个 <template> 中包裹默认插槽的内容:
 
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
 
  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
 
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
 
任何一种写法都会渲染出:
 
<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>
 
————————————————