假定我们有一个 app-layout 组件，它的模板为：
<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> 渲染结果为：
<div class="container">
<header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer> </div>作者：ddai_Q
链接：https://www.jianshu.com/p/31674b727954
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。