vue学习-11-具名插槽使用

具名插槽

具名插槽在使用时使用指定的slot

<template id="cpn">
		<div>
			<slot name="header"><h3>默认头部</h3></slot>
			<slot name="content"><h3>默认内容</h3></slot>
			<slot name="footer"><h3>默认尾部</h3></slot>
			<slot></slot>
			<slot name="default"></slot>
		</div>
	</template>
	
	<div id="app">
			<!-- 如果slot没有显示指定name属性，那么默认值是default -->
			<cpn1>
				<h4><!-- template 元素中的所有内容都将会被传入相应的插
				槽。任何没有被包裹在带有 v-slot 的 template 中的内容都
				会被视为默认插槽的内容。 --></h4>
				<h4>v-slot:xx要结合template标签使用</h4>
				<template v-slot:header>
					<h3>组件标签中设置的头部</h3>
				</template>
				<template v-slot:content>
					<h3>组件标签中设置的内容</h3>
				</template>
				<template v-slot:footer>
					<h3>组件标签中设置的尾部</h3>
				</template>
				<h3>没有设置name的slot</h3>
				<!--   -->
				 v-slot:xx可以缩写为:#xx
			</cpn1>
		</div>

1、在slot中指定name属性
2、在使用cpn标签是通过v-slot:xx指定要使用的slot(v-slot结合template使用)