17 - Vue 学习笔记 - slot 插槽的基本使用、作用域插槽

slot 翻译为 插槽：
在生活中很多地方都有插槽，电脑的 USB 插槽等等。
插槽的目的是让我们原来的设备具备更多扩展性。
比如电脑的 USB 我们可以插入 U盘、硬盘、手机、鼠标等等。

组件的插槽

组件的插槽是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
我们举个例子：

<template id="cpn">
	<div>
		<h2>我是组件</h2>
		<p>我是组件，哈哈哈</p>
	</div>
</template>

上面这个 cpn 组件，就不具备可扩展性，假如我们希望使用它的时候，在 p 标签下面再加入一个 button 按钮，而另外一个地方使用它的时候下面加入一个 span 等等，这个时候我们如果直接修改 cpn 内部的代码，就不合适了。

插槽的简单使用

接下来我们来使用插槽，在 template 中添加一个 slot 标签。

<template id="cpn">
	<div>
		<h2>我是组件</h2>
		<p>我是组件，哈哈哈</p>
		<slot></slot>
	</div>
</template>

然后我们在使用这个组件的时候，在使用的这个组件的标签内部，写上我们需要插入的标签，如下：

<div id="app">
	<cpn>
		<button>按钮</button>
	</cpn>
	<cpn>
		<span>哈哈哈</span>
	</cpn>
	<cpn>
		<i>呵呵呵</i>
	</cpn>
	<cpn>
		<button>按钮</button>
	</cpn>
</div>

我们就会发现，标签 slot 被组件标签内部的替换了。这也就实现了我们想要的效果。

如果我们发现插槽很多情况下都是一种标签，少部分情况是其他标签，我们可以给插槽一个默认值，只需要在 slot 标签内部加入默认的标签就可以，这样我们需要替换的时候，再额外写出。

<slot>
	<!-- 默认为按钮 -->
	<button>按钮</button>
</slot>

如果有多个值，同时放到组件中进行替换时，会一起作为替换元素，而不是第一个或最后一个。

具名插槽的使用

在很多时候，插槽可能不止一个，那么我们怎么指定需要替换的是哪个插槽呢？这个时候我们就需要给插槽取名字。

<div id="app">
	<cpn>
		<!-- slot 指定哪个插槽 -->
		<span slot="center">标题</span>
		<button slot="left">返回</button>
		<!-- 因为没有没有 name 的插槽，所以下面这句话没有任何作用 -->
		<p>没有指定 slot</p>
	</cpn>
</div>

<template id="cpn">
	<div>
		<!-- name 给插槽取名字 -->
		<slot name="left">
			<span>左边</span>
		</slot>
		<slot name="center">
			<span>中间</span>
		</slot>
		<slot name="right">
			<span>右边</span>
		</slot>
	</div>
</template>

如果我们使用组件插入插槽内容的时候没有指定 slot ，那么 Vue 只会找没有指定 name 的插槽，有名字的是不会被找到的，只能通过指定 slot 找到这插槽。

---

作用域插槽

编译作用域

学作用域插槽前，我们先需要明白编译作用域。
我们来看一个例子：

<div id="app">
	<cpn v-show="isShow"></cpn>
</div>

<template id="cpn">
	<div>
		<h2>我是子组件</h2>
		<p>我是内容，哈哈哈</p>
		<button v-show="isShow">按钮</button>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			isShow: true
		},
		components: {
			cpn: {
				template: `#cpn`,
				data() {
					return {
						isShow: false
					}
				}
			}
		}
	});
</script>

这里面父组件 Vue 实例 app 有 isShow ，子组件 cpn 也有 isShow 并且我们将 isShow 绑定到了 cpn 上，这个时候看的是哪个 isShow 呢。

Vue 官方给了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

也就是说在父组件 app 中使用的东西，都来自于父组件，所以 cpn 是可以被显示出来的，而子组件里的数据都来自于子组件，所以 button 是显示不出来的。

这也和之前父子组件一致，父组件不能直接访问子组件的数据，子组件也不能直接访问父组件的数据。

作用域插槽

作用域插槽是 slot 一个比较难理解的点，而且官方文档说的也有点不清晰。
这里用一句话做一个总结：

• 父组件替换插槽的标签，但是内容由子组件来提供。

我们先来一个需求：

1. 子组件中包括一组数据，比如：pLanguages:[‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, '‘C++’]
2. 需要在多个界面进行展示：（每个地方展示方式不一样）
   某些界面是以水平方向展示的
   某些界面是以列表形式展示的
   某些界面直接展示一个数据
3. 内容在子组件，希望父组件告诉它如何展示。

<div id="app">
	<!-- 默认展示 -->
	<cpn></cpn>
	<!-- 不同方式展示 -->
	<cpn>
		<!-- 目的是获取子组件中的 pLanguages -->
		<!-- 由于编译作用域,下面这种方式拿不到数据	-->
		<!-- <span v-for="item in pLanguages"></span> -->

		<!-- 2.5.x 一下必须使用 template -->
		<!-- slot-scope 应用插槽对象 -->
		<template slot-scope="slot">
			<!-- slot.data 拿到 slot 里面的 data -->
			<span v-for="item in slot.data">{{item}} -</span>
		</template>
	</cpn>
	<!-- 不同方式展示 -->
	<cpn>
		<template slot-scope="slot">
			<span>{{slot.data.join(' * ')}}</span>
		</template>
	</cpn>
</div>

<template id="cpn">
	<div>
		<!-- : 后面名字可以随便取	-->
		<slot :data="pLanguages">
			<ul>
				<li v-for="item in pLanguages">{{item}}</li>
			</ul>
		</slot>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			message: "hello"
		},
		components: {
			cpn: {
				template: `#cpn`,
				data() {
					return {
						pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
					}
				}
			}
		}
	});
</script>