Vue默认插槽、具名插槽、作用域插槽的定义及使用方法_插槽default

---

应用场景

插槽的作用是在子组件中某个位置插入父组件的自定义html结构和data数据

---

三种插槽的定义

插槽分为三种：
默认插槽 具名插槽 作用域插槽

1.默认插槽
【定义：默认插槽是将父组件的结构和数据插入子组件中，默认插槽只有一个插入位置，要插入的html结构和data数据必须在父组件中，不过css可以在子组件中】
【简述：将父组件的自定义html和data插入子组件的对应位置】
【特点：父组件决定结构和数据】

2.具名插槽
【定义：具名插槽和默认插槽类似，只是默认插槽只有一个插入位置，具名插槽可以有多个插入位置】
【简述：将多个父组件的自定义html和data插入子组件的多个位置】
【特点：父组件决定结构和数据】

3.作用域插槽
【定义：作用域插槽的data数据固定写在子组件中，数据的html结构根据父组件传入的html结构来决定】
【简述：根据父组件中不同的html结构解析data中的数据】
【特点：子组件决定数据，父组件决定结构】

---

使用方法

1.默认插槽

父组件

<template>
	<Child> <!-- Child为子组件标签 -->
		<!-- 插槽内容 -->
		<template>要插入的html内容</template>
	</Child>
</template>

1
2
3
4
5
6
7

子组件

<template>
	<div>
		<!-- 插槽位置 -->
		<slot>插槽未被调用时会显示此内容</slot>
	</div>
</template>
1
2
3
4
5
6

---

2.具名插槽

父组件

<template>
	<Child> <!-- Child为子组件标签 -->
		<!-- 插槽内容 -->
		<template slot="header">要插入的html内容1</template>
		<template slot="center">要插入的html内容2</template>
		<template slot="footer">要插入的html内容3</template>
	</Child>
</template>

1
2
3
4
5
6
7
8
9

子组件

<template>
	<div>
		<!-- 插槽位置 -->
		<slot name="header">插槽未被调用时会显示此内容</slot>
		<slot name="center">插槽未被调用时会显示此内容</slot>
		<slot name="footer">插槽未被调用时会显示此内容</slot>
	</div>
</template>
1
2
3
4
5
6
7
8

---

3.作用域插槽

父组件

<template>
	<Child> <!-- Child为子组件标签 -->
		<!-- 插槽内容 -->
		<template slot="header">
			<span v-for="m in data.msg" :key="m"></span>
		</template>
		<template slot="center">
			<div v-for="m in data.msg" :key="m"></div>
		</template>
		<template slot="footer">
			<label v-for="m in data.msg" :key="m"></label>
		</template>
	</Child>
</template>

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

子组件

<template>
	<div>
		<!-- 插槽位置 -->
		<slot :msg="msg">插槽未被调用时会显示此内容</slot>
	</div>
</template>

<script>
	export default {
		name: 'Child',
		// 公用数据
		data() {
			return {
				msg: ["火锅", "红烧肉", "烤羊腿"]
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---