vue 中的插槽Slot基本使用和具名插槽

一、插槽Slot的作用

1、为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；
2、比如某些情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；
3、我们应该让使用者可以决定某一块区域到底放什么内容和元素；
4、所以就可以使用插槽来解决这个问题

换句话来说，想在一个组件标签中添加新内容，那么我们就需要在该组件内声明一个插槽，不然添加新的内容不会内渲染

二、使用

用slot元素作为插槽；
插入声明内容是由父元素如何使用，比如父组件插入按钮、插入图片，就会显示按钮图片，如果没有，那就不显示或许显示插槽默认的内容；
有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容：
当然这个默认的内容只会在没有提供插入的内容时，才会显示；
可以在slot标签中设置一个默认内容

父组件
App.vue

<template>
	<div class="app">
		<!-- 内容是button -->
		<show-message title='哈哈哈'>
			<button>我是按钮元素</button>
		</show-message>
		<!-- 内容是超链接 -->
		<show-message>
			<a href="#">百度一下</a>
		</show-message>
		<!-- 没有值传递 -->
		<show-message></show-message>
	</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件
showMessage.vue

<template>
	<h2>{{title}}</h2>
	<div>
		<slot>
			<p>这是默认值</p>
		</slot>
	</div>
</template>
1
2
3
4
5
6
7
8

具名插槽Slot

希望达到的效果是插槽对应内容的显示，这个时候就可以使用具名插槽：
具名插槽顾名思义就是给插槽起个名字，slot元素有一个特殊的attribute：name;
一个不带name的slot，会带有隐含的名字 default;
也就是说，我们可以给每个插槽都取上名，
在父组件中使用的时候，需要包裹一个template标签，并且templat中使用
v-solt：插槽名 具名插槽缩写 #

父元素
App.vue

<template>
	<nav-bar>
		<template v-slot:left>
			<button>返回</button>
		</template>
		<template v-slot:center>
			<span>标题</span>
		</template>
		<template v-slot:right>
			<a href="#">登录</a>
		</template>
	</nav-bar>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

子组件
NavBar.vue

<template>
	<div class='nav-bar'>
		<div class='left'>
			<slot name="left">left</slot>
		</div>
		<div class='center'>
			<slot name="center">center</slot>
		</div>
		<div class='right'>
			<slot name="right">right</slot>
		</div>
	</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13

动态插槽名

通过v-slot:[dynamicSlotName] 方式动态绑定一个名称