Vue学习笔记 （插槽）

插槽

在模板中定义插槽预留空间，在HTML的组件标签中嵌入需求代码来使用插槽。

在组件化开发中，除了公用的代码之外，尽可能让需求变化大的代码都用插槽代替。

插槽可以有默认值，该默认值定义在<slot></slot>标签中，当定义了插槽却没有显式嵌入功能时，该默认代码将被使用。

在只有一个插槽时，无论嵌入时定义了多少代码都会生效。

在定义了多个插槽时，为了精确的替换或嵌入其中某个插槽，可以给每个插槽起一个名字，即具名插槽。

<cpn><button slot="center">主页</button></cpn> //仅替换了name为center的插槽

<template>
	<slot name="left"><span>返回</span><slot>
	<slot name="center"><span>搜索框</span><slot>
	<slot name="right"><span>菜单</span><slot>
</template>

编译作用域：已知父组件与子组件，在父组件标签下的任何数据与属性都只会访问父组件中的data，而在子组件的template中的属性与数据访问才会访问子组件的data。

当父插槽想要使用子组件中的data时，因为编译作用域的问题，父组件无法获取子组件中的data，这时可以使用作用域插槽，将子组件中的数据作为插槽的属性供父组件调用。

<div id="app">
	<cpn>
		<template v-slot="slotProps"> //slotProps是一个别名，可以随意起
			<ul>
				<li v-for="sport in slotProps.data">#{{sport}}</li> //这里可以直接引用data属性
			</ul>
		</template>
	</cpn>
</div>

<template id="cpn">
	<div>
		<slot :data="sports"> #将sports数据作为data属性传入，属性名可以随便起，这里是data
			<ul>
				<li v-for="sport in sports">{{sport}}</li>
			</ul>
		</slot>
	</div>
</template>
<script>
	new Vue({
		el:'#app',
		components:{
			cpn:{
				template:'#cpn',
				data(){
					return{
						sports : ['篮球','羽毛球','足球','乒乓球','冰球']
					}
				}
			}
		}
	})
</script>