vue学习-10-插槽使用

插槽slot

	<div id="app">
			<cpn1>
				<h3>中中</h3>
				<h4>中下</h4>不指定slot，默认会将没有设置name属性所有的slot标签全部替换为组件内的标签。
				比如这里组件内有一个h3、一个h4。模板中有两个slot标签，那么结果就是
				<h3></h3>
				<h4></h4>
				<h3></h3>
				<h4></h4>
			</cpn1>
		</div>

	<template id="cpn">
		<div>
			<h3>上</h3>
			<slot><h3>中，默认</h3></slot><!-- 可以添加默认标签 -->
			<slot></slot>
			<h3>下</h3>
		</div>
	</template>

slot就像是占一个位置，可以分为带名字的私人位置(具名插槽)和公共位置
这里先介绍公共的插槽

这里在组件中有两个slot，第一个插槽有默认标签，当在使用子组件标签时没有在其中加入其他标签就会展示默认的标签。
比如这里在使用的时候只有一个cpn标签

	<div id="app">
			<cpn1></cpn1>
		</div>

结果：
上
中，默认
下

当在cpn标签中添加其他标签：

	<div id="app">
			<cpn1>
				<h3>中中</h3>
				<h4>中下</h4>
			</cpn1>
		</div>

结果：
上
中中
中下
中中
中下
下