深入理解Vue slot的原理

前言

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

为什么需要插槽

在深入原理之前，我们还是巩固一下基础。
为什么我们需要插槽这个特性，插槽到底是什么？
如果你看的是Vue2的文档，那么你会一头雾水：

Vue2几乎是没什么铺垫，上来就给你介绍插槽的特性。所以插槽到底是什么，为什么要用这个东西，得你自己悟。
Vue3的文档稍微好一点：

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

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

为什么要使用插槽呢？接下来我通过一个例子来说明。
现在假设你要实现一个无序列表的组件，基本长下面这样：

但是用户可能不满足于此，他们希望能让选项的字体加粗，或者变成斜体，或者改变字体颜色，或者在选项前面增加图标。更有甚者，他们希望选项的内容可以是更加复杂的DOM结构。

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

用插槽就可以完美解决这个问题。
我们定义一个组件List：

<script setup>let props = defineProps(['data'])
</script><template><ul><li v-for="item in props.data"><slot v-bind="item">{{item.text}}</slot></li></ul>
</template>

父组件可以这么用：

<script setup>
import { ref } from 'vue'
import List from './List.vue';const data = [ {text: 'Java' }, { text: 'PHP'}, { text: 'CSS'} ]
</script><template><List :data />
</template>

这里使用的是后备内容，所以就是平平无奇的展示。

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

<template v-slot="data"><b><i>{{data.text}}</i></b></template>

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

作用域插槽

这里我们不在赘述默认插槽、具名插槽，这没啥好说的，我们直接来看作用域插槽。
作用域插槽的难点就在解构prop上，写法有很多种，比如：

<template v-slot="{ user }">{{ user.name }}
</template>

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

<template v-slot="scope">{{ scope.user.name }}
</template>

你还可以进行属性映射：

<template v-slot="{ user: person }">{{ person.name }}
</template>

你还可以这样：

<template v-slot="{ user = { name: 'Guest' } }">{{ user.name }}
</template>

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

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

有这些疑问都是因为不熟悉插槽的原理。不熟悉原理就只能死记硬背，熟悉了，根本就不用记。
在vue2的文档里面有对解构的原理进行解释：

所以这些语法不是Vue创造的，而是ES2015的函数参数解构的语法，比如：
普通的参数解构

function test({ name }) {console.log(name)
}let user = { name: '张三', age: 18 }
test(user) // 张三

解构的时候提供默认值：

function test({ name='张三' }) {console.log(name)
}let user = { age: 18 }
test(user) // 张三
user.name = '李四'
test(user) // 李四

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

function test({ name: userName}) {console.log(userName)
}let user = { name: '张三', age: 18 }
test(user) // 张三

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

插槽的原理

最后我们终于要系统性的看看插槽是怎么实现的了，我们可以在Vue的Playground看看插槽编译后的结果。
子组件编译后的关键代码：

子组件的render函数中通过调用renderSlot方法来渲染插槽，你可以认为子组件会去调用：

_ctx.$slots.default({item})

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

_createTextVNode(_toDisplayString(item.text), 1 /* TEXT */)

接下来我们再看看父组件编译后的关键代码：

父组件通过createBlock渲染子组件，第三个参数传的是插槽的实现，default就是默认插槽的名字（如果是具名插槽，那么就是对应插槽的名字）。
我通过JS的高阶函数来模拟这个过程，让大家更容易理解这个原理。
现在假设我一个函数list：

function list(consumer) {const data = [ {text: 'Java' }, { text: 'PHP'}, { text: 'CSS'} ]for (let item of data) {consumer(item)}
}

list函数可以通过接收一个consumer，让调用方来控制输出的方式。
调用方，可以这样：

list((data) => console.log(data.text))
// Java
// PHP
// CSS

也可以控制输出，比如：

list((data) => console.log('==', data.text, '=='))
// ==Java==
// ==PHP==
// ==CSS==

也可以解构：

list(({text}) => console.log(text))
// Java
// PHP
// CSS

这样是不是更容易理解了。
父组件不同的插槽实现，编译出来的结果也不一样，这就是vue的编译器要做的事情了。
比如，我们看看prop解构的时候，编译的结果是什么样子的。
没有解构的情况：

<template v-slot="data">{{data.text}}</template>

编译后：

有解构：

<template v-slot="{text}">{{text}}</template>

编译后：

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

<template v-slot="{text: name}">{{name}}</template>

编译后：

提供参数默认值：

是不是一模一样！所以这块就是用的JS的语法特性。

什么时候需要进行解构，什么时候不需要呢，这取决于父组件需要关注哪些prop。
子组件定义插槽的时候，可以绑定多个属性，比如：

<slot :text="item.text" :icon="item.icon">{{item.text}}</slot>

编译后的结果如下：

如果父组件提供插槽内容的时候只使用text，那么就可以只解构出text属性。

<template v-slot="{ text }">{{text}}</template>

如果text和icon都要用到，那么就都解构：

<template v-slot="{ text, icon }"><i class="fa" :class="'fa-' + icon"></i><span>{{text}}</span></template>

或者不解构：

<template v-slot="item"><i class="fa" :class="'fa-' + item.icon"></i><span>{{item.text}}</span></template>

这些都不需要死记硬背，你知道了原理，知道了父组件v-slot的内容就是子组件所有bind的属性组成的对象，知道了它的结构，你就知道要不要解构，以及可以怎么解构。

总结

总结一下，最重要的三个结论：

1. 插槽是一种组件的传参方式，可以传递模板内容，可以提高组件的灵活性
2. 插槽的本质就是JS的高阶函数，函数由父组件实现，子组件调用
3. 插槽的prop解构不是vue的语法，本质就是ES6方法参数的解构语法