Vue使用 slot 特性进行内容分发,我的理解是: 在父组件中放入已被
slot
标记的内容,这些内容的顺序可以随意。之后这些内容被分发到子组件的特殊元素slot
中,根据name
属性在子组件中重新组合。
父组件模板内容
<!--父组件模板-->
<div id="parent-template">
<child>
<!--此处是待分发的内容-->
<p slot="one">one</p>
<p slot="two">two</p>
<p>default</p>
</child>
</div>
父组件模板中的内容被分发到子组件中重新组合,请看子组件的模板:
<!--子组件的模板-->
<div>
<h1>内容被分发且重新组合</h1>
<slot>默认分发处</slot>
<slot name="two"></slot>
<slot name="one"></slot>
</div>
子组件模板内容
初始化父组件实例之前要注册子组件:
//注册子组件
Vue.component("child", {
template: '<div>'+
'<h1>内容被分发且重新组合</h1>'+
'<slot>默认分发处</slot>'+
'<slot name="two"></slot>'+
'<slot name="one"></slot>'+
'</div>'
});
// 初始化父组件
new Vue({
el: "#parent-template"
});