具名插槽

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

# 子组件

<div class="container">

  <header>

    <slot name="header"></slot>

  </header>

  

 <main>

    <slot></slot>

  </main>

  <footer>

    <slot name="footer"></slot>

  </footer>

</div>

 

 

# 父组件

<app-layout>

  <h1 slot="header">这里可能是一个页面标题</h1>

  <p>主要内容的一个段落。</p>

  <p>另一个主要段落。</p>

  <p slot="footer">这里有一些联系信息</p>

</app-layout>