具名插槽

标签：mil   footer   png   多个   bsp   ima   class   特殊   一个   

<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>

具名插槽

标签：mil   footer   png   多个   bsp   ima   class   特殊   一个   

原文地址：https://www.cnblogs.com/ht955/p/14246504.html