2019-05-04 | 8348
具名插槽
有时我们需要多个插槽。例如，假定我们有一个 app-layout 组件：
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer></div> |
slot 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
父组件模板
<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p></app-layout> |
结果为：
<div class="container"> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer></div> |
一个不带 name 的 出口会带有隐含的名字“default”。
0
基础指令
vue-cli3.0