Vue中插槽slot的使用与理解

1.slot：名为插槽，实则作为分发数据的一种接口形式。

2.slot主要有具名插槽和作用域插槽。

①具名插槽主要针对多个插槽，为了区分这些插槽作用于不同的地方，因此在定义插槽的时候，添加name属性用来表示插槽名。

②作用域插槽主要用于针对不同的插槽、不同的条件下插入不同的数据，以达到理想效果。

话不多说，先上代码，再做分析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="app8">
			<current-user v-bind:user="user">
			  <template #default="myslot">
			    <!--{{ myslot.user.firstName }} {{ myslot.user.lastName }}-->
			  </template>
			  <template #myslot="myslot">
				  <!--中间可以加if-->
				  父组件：
				  <span v-if="myslot.user.isFirstName">{{ myslot.user.firstName }}</span>
				  <span v-else>{{ myslot.user.lastName }}</span>
			  </template>
			</current-user>
		</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Vue.component('current-user', {
			props:['user'],
			template:`
			<span>
			  <slot v-bind:user="user">
			    子组件：{{ user.lastName }}
			  </slot>
			  <slot name="myslot" v-bind:user="user">
			    子组件：{{ user.firstName }}
			  </slot>
			</span>
			`
		});
		
		var app8 = new Vue({
			el:'#app8',
			data:function(){
				return {
					user:{
						lastName:'云中',
						firstName:'司',
						isFirstName:true
					}
				}
			}
		})

说明：

1.current-user是我自定义的一个组件，绑定了user的property，用于获取vue实例（app8）中的user对象。

2.组件中的template中使用了<slot></slot>标签，用于定义插槽。包含了name属性，用于标识插槽的名称，还包含了v-bind，用于绑定父级插槽，也就是<template></template>标签，然后指明我所使用的插槽名，可以用v-slot指定，也可以缩写为#,但是使用缩写必须要跟上参数（也就是插槽名），例如v-slot:default = "myslot"等价于#:default="myslot"。

3. <template #default="myslot"></template>相当于<slot name="myslot" v-bind:user="user"></slot>的父插槽。

4.插槽中通常可以结合v-if来显示不同的插槽内容。

注：这里需要绑定父级插槽，如果不绑定父级插槽，而使用如下的代码，则会插槽将不会显示任何内容

错误代码：

1
2
3
<current-user>
  {{ user.firstName }}
</current-user>
1
2
3
4
5
6
7
8
9
10
11

template:`
			<span>
			  <slot>
			    子组件：{{ user.lastName }}
			  </slot>
			  <slot>
			    子组件：{{ user.firstName }}
			  </slot>
			</span>
			`