Vue插槽——理解v-slot指令以及其为何要废弃具名插槽和作用域插槽

---

前言

Vue在2.6.0中，更新添加了一个新的指令v-slot，用于取代原先的slot与slot-scope属性的功能。

	注意：此处的slot为属性，不是HTML标签那个<slot></slot>

---

一、Vue的插槽

Vue中的插槽很好用也很实用，在实际开发项目时或多或少几乎都会遇到，很多第三方引入的组件提供的修改内容的方法，也是通过插槽。

但网上关于插槽的教程与介绍都还是 “插槽种类分为三种：单个插槽/具名插槽/作用域插槽” 等等，也包括很多第三方组件仍然使用着slot与slot-scope属性。

（例如下图便是element-ui关于el-tree组件的文档中介绍如何去自定义节点内容）
如果你对slot以及slot-scope属性还不理解，对插槽还不是很熟悉，推荐看一下这篇博文，博主对于vue中的插槽写的非常详尽易懂

深入理解vue中的slot与slot-scope–云荒杯倾

虽然slot以及slot-scope属性已经被废弃，但在vue 2.x版本中未被移除，依然可以使用，特别是在很多基于Vue的框架中被大量使用，所以学习还是很有必要的！

---

二、为何引入v-slot

1.作用域插槽的局限和缺点

如果你理解了slot以及slot-scope属性，就会明白slot-scope的用法是写在slot所在组件下\标签中，例：

<!--版本一：-->
<class> 
	<template slot-scope="name"> 
		<div> 
			{
  { name }} 
		</div> 
	</template> 
</class>

结果有人提出这个\是否真的有必要，直接将slot-scope写在组件下的元素上不就可以简洁一点。 于是Vue在2.5版本中更新了该功能：

<!--版本二：-->
<class>
	<div slot-scope="name">
		{
  { name }}
	</div> 
</class>

嗯，确实简洁了不少，那能用于HTML标签，自然也应该可以用于组件上，于是：

<!--版本三：-->
<class>
	<people slot-scope="name">
		{
  { name }}
	</people>
</class>

这个用法很常用，几乎现在的插件都是这么写的，然而这样使用，有个大问题：

无法直观表示该slot-scope用于哪个组件的插槽，明明是写在<people>标签上，然而跟people组件没有关系，这个name竟然是class组件中的数据。

如果再套娃几层：

<class>
	<people slot-scope="grade">
		<book slot-scope="number">
			<div slot-scope