Vue组件-插槽

插槽

普通插槽

在子组件中,使用特殊的标签就可以为子组件开启一个插槽,该插槽插入什么内容取决于父组件的使用

<div id="app">
		<comp>插槽被替换</comp>
	</div>

	<template id="tmp">
		<h1>
			<slot>我是一个默认插槽</slot>
		</h1>
	</template>
	
	<script type="text/javascript">
		let comp=Vue.extend({
			template: "#tmp",
		})
		let app=new Vue({
			el:"#app",
			components:{
				comp
			}
		})
	</script>

具名插槽

当子组件功能复杂时,子组件可能不是一个,而是多个,那就要级插槽起一个具体的名字了,不然不知道是那个插槽了

<div id="app">
		<comp>
			<span slot="left">首页</span>
			<span slot="center">内容</span>
			<span slot="right">返回</span>
		</comp>
	</div>

	<template id="tmp">
		<h1>
			<slot name="left">左</slot>
			<slot name="center">中</slot>
			<slot name="right">右</slot>
		</h1>
	</template>
	
	<script type="text/javascript">
		let comp=Vue.extend({
			template: "#tmp",
		})
		let app=new Vue({
			el:"#app",
			components:{
				comp
			}
		})
	</script>