vue插槽的原理（vue插槽的作用）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p>

讯享网

插槽是Vue中一个重要的特性，它有很多种用法：默认插槽、具名插槽、作用域插槽。尤其作用域插槽，还有一堆特性，比如解构prop，解构prop的时候还可以进行属性名的映射。
记不住，根本记不住。
死记硬背当然记不住，但只要了解了原理，这些根本不用记。

在深入原理之前，我们还是巩固一下基础。
为什么我们需要插槽这个特性，插槽到底是什么？
如果你看的是Vue2的文档，那么你会一头雾水：
在这里插入图片描述
讯享网
Vue2几乎是没什么铺垫，上来就给你介绍插槽的特性。所以插槽到底是什么，为什么要用这个东西，得你自己悟。
Vue3的文档稍微好一点：

Vue3的文档说到了插槽的一些关键的点，但仍然很隐晦。
这里我们戳破这层窗户纸，给插槽一个明确的定义：

插槽给是组件的一种传参方式。组件可以通过props传参，也可以通过插槽传参。
props传参传的是对象或值，插槽传的是模板内容
使用插槽的目的是将一部分由子组件负责的渲染工作交给父组件定义，提高的组件的灵活性

为什么要使用插槽呢？接下来我通过一个例子来说明。
现在假设你要实现一个无序列表的组件，基本长下面这样：
在这里插入图片描述
但是用户可能不满足于此，他们希望能让选项的字体加粗，或者变成斜体，或者改变字体颜色，或者在选项前面增加图标。更有甚者，他们希望选项的内容可以是更加复杂的DOM结构。

怎么办？如果没有插槽，你只能给组件提供足够多的props，让用户通过设置这些props来定制自己想要的效果。用户有新的需求，你也要跟着修改。

讯享网

父组件可以这么用：

这里使用的是后备内容，所以就是平平无奇的展示。
在这里插入图片描述

如果父组件想要让文字加粗或者使用斜体或改变颜色，它可以自己定义：

讯享网

List组件不需要做任何改动。

你有没有想过为啥user要包裹一个花括号，你也可以不包裹：

讯享网

你还可以进行属性映射：

你还可以这样：

讯享网

不是，这都是啥，直接懵了呀。

我为什么要加括号，什么时候不加
属性映射是个啥，有啥用呀
解构的时候还可以提供默认值？
还有这是Vue的模板语法，还是JS的语法呀

有这些疑问都是因为不熟悉插槽的原理。不熟悉原理就只能死记硬背，熟悉了，根本就不用记。
在vue2的文档里面有对解构的原理进行解释：
在这里插入图片描述
所以这些语法不是Vue创造的，而是ES2015的函数参数解构的语法，比如：
普通的参数解构

解构的时候提供默认值：

讯享网

解构的时候进行属性映射：

只要这种参数解构的语法是JS支持的，那么Vue的插槽就是支持的，你还需要死记硬背吗。

最后我们终于要系统性的看看插槽是怎么实现的了，我们可以在Vue的Playground看看插槽编译后的结果。
子组件编译后的关键代码：
在这里插入图片描述
子组件的render函数中通过调用renderSlot方法来渲染插槽，你可以认为子组件会去调用：

讯享网

如果父组件没有提供插槽的模板，子组件就会渲染后备内容，也就是：

接下来我们再看看父组件编译后的关键代码：
在这里插入图片描述
父组件通过createBlock渲染子组件，第三个参数传的是插槽的实现，default就是默认插槽的名字（如果是具名插槽，那么就是对应插槽的名字）。
我通过JS的高阶函数来模拟这个过程，让大家更容易理解这个原理。
现在假设我一个函数list：