vue

slot内容分发

通俗理解slot内容分发

Posted by Aaronwn on December 15, 2017

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"
});

参考文档

知乎文档