内容的分发<slot>,相当于angular里面的transclusion,<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。
ue.component('my-mail',{
template:"<div><h2>我是标题</h2><slot></slot></div>"//放入slot标签,就可以在
自定义组件my-mail里面进行添加元素等操作了
});
内容分发:通过在注册组件的时候写上slot的name属性,可以在html标签里面通过slot的属性名来相应的匹配到注册时的元素标签里面,进行操作
<divid="vm">
<app-layout>
<h1slot="header">这里可能是一个页面标题</h1>
<div>我是主要区域</div>
<p slot="footer">XXX这里有一些联系信息</p>
</app-layout>
</div>
</body>
</html>
<scriptsrc="vue.js"></script>
<script>
Vue.component('app-layout',{
template:"<div class='container'>"+
"<header><slot name='header'></slot></header>"+
"<main><slot></slot></main>"+
"<footer><slot name='footer'></slot></footer></div>"
});
渲染结果
<div id="vm"> <div class="container"> <header> <h1>这里可能是一个标题</h1> </header> </div> <main> <div>我是主要区域</div> <div> <h4> xxx这里有一些联系信息 </h4> </div> </main> <footer></footer> </div>
作用域插槽
可以通过带有scope属性的template标签获得
Html里面的代码:
<app-layout>
<template scope="props">
<span>{{ props.text }}</span>
</template>
</app-layout>
注册组件代码:
Vue.component('app-layout',{
template:'<div class="child">'+
'<slot text="doyoulove..."></slot>'+
' </div>'
});