全网首发，你不知道的 vue slot 透传

全网首发，你不知道的 vue slot 透传

最近在做插槽时想要实现 slot 多级透传，找了比较久没有啥文章说这个。实现原理很简单，这里写一篇文章记录一下，希望能帮到大家。

1. slot 传递的是什么？

说到这个大家其实都知道，就是 render 函数而已。只是我们已经习惯这么写了

// 父
<template #default>111</template>

// 子
<slot name="default"></slot>

这个时候 <slot> 组件会去找当前组件中的 slots 中名称为 default 的 render 函数进行渲染。

父子 这种情况还是比较简单。如果是多级情况传递下如果通过类似击鼓传花的方式就累死了。

2. 通过 provide 和 inject 实现 透传

我们知道 变量 可以通过 provide 和 inject 实现 透传。

但是其实 slot 也可以通过 provide 和 inject 实现 透传。

// 父
provide('parentSlots', slots)
    
// 孙
    
const parentSlots = inject('parentSlots')

<template>

  <component :is="parentSlots.default"></component>

</template>

只需要将原来 <slot> 的方式 变为 <component> 通过 is 传递进去就可

3. 结语

很小的一个点吧，一般情况下用到的不多，除非是引入别人组件或者组件层级非常深入才有可能用到。