标签：位置 div 模板 包含 UI ejs logs html 基础上
资料来自：https://cn.vuejs.org/v2/guide/components.html#具名-Slot
在官方文档的基础上，更加细致的讲解代码。
<slot> 标签中的任何内容都被视为备用内容，只有在宿主元素为空，它才显示。
除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将丢弃。
<body > <div id="app"> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div> <script src="js/vue.min.js"></script> <script> new Vue({ el:‘#app‘, components:{ myComponent:{ template:‘<div><h2>我是子组件的标题</h2><slot>只有在没有要分发的内容时才会显示。</slot></div>‘, } } }) </script> </body>
slot 可以有不同的名字。具名 slot 将匹配内容片段中所对应 slot 特性。
将对应的父组件嵌套到 具名 slot 的子组件 位置 的元素展示出来。
<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p> </app-layout> <script src="js/vue.min.js"></script> <script> new Vue({ el:‘#container‘, components:{ appLayout:{ template:‘<div class="container">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>‘,
}
}
})
标签：位置 div 模板 包含 UI ejs logs html 基础上
原文地址：http://www.cnblogs.com/TBNICE/p/7022696.html
