Vue：插槽的作用，具名插槽的使用_vue中的具名插槽的作用

一.插槽的作用
声明一个child组件

<div id="app">
			<child>你好Box</child>
		</div>
		<script>
			Vue.component('child',{
				template: `<div>
								<p>Hello box</p>
						   </div>`
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果如图，但是你好Box中的内容没有起作用
此时我们引出插槽来解决这个问题

<script>
			Vue.component('child',{
				template: `<div>
								<p>Hello box</p>
								<slot></solt>
						   </div>`
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11
12

我们在组件中加入插槽后你好Box中的内容起作用了

若在没有定义内容，我们可以在中定义默认内容

<div id="app">
			<child></child>
		</div>
		<script>
			Vue.component('child',{
				template: `<div>
								<p>Hello box</p>
								<slot>默认内容</solt>
						   </div>`
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

现在我们知道了插槽的作用是什么
首先要明白插槽是使用在子组件中的，
插槽是为了将父组件中的子组件模板数据正常显示

二.具名插槽

<child>
				<div>header</div>
				<div>footer</div>
			</child>
		</div>
		<script>
			Vue.component('child',{
				template: `<div>
								<slot></slot>
								<div>content</div>
								<slot></slot>
						   </div>`
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们在模板中定义的内容为

<slot></slot>
<div>content</div>
<slot></slot>
1
2
3

我们想要的效果实际上是
header
content
footer
这里父组件在调用子组件的时候传入了两个插槽

<div>header</div>
<div>footer</div>
1
2

我们可以在模板中通过solt调用这两个插槽
这里我们引出具名插槽，具名插槽就是给插槽起个名字

<div id="app">
			<child>
				<div slot='header'>header</div>
				<div slot='footer'>footer</div>
			</child>
		</div>
		<script>
			Vue.component('child',{
				template: `<div>
								<slot name='header'></slot>
								<div>content</div>
								<slot name='footer'></slot>
						   </div>`
			})
			
			var app = new Vue({
				el:"#app",
			})
		</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19