vue3解决slot深层透传问题
问题
组件嵌套导致的层级过深，slot难以传入到指定组件，一层层传又低效，并且增加维护成本。
解决方式
利用 provide 和 inject 及 h() 函数 以及 vnode 实现slot透传
父容器中定义了插槽后，通过 provide 往后传输 slot 的虚拟 DOM 节点 (vnode)：
slot组件中使用 inject 接收到父容器传输的slots后，通过渲染函数 h() 渲染虚拟 DOM 节点 (vnode)，从而实现slot在任意深层组件使用：
使用方式
任意的深层组件引用slot组件并获取需要的slot DOM进行渲染即可
- 父容器代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="TablePageBox"> <span class="slot-a"> {{ arg.code }} </span> </div>import { provide, defineComponent } from 'vue';export default defineComponent({ name: 'box', setup(ctx: any) { provide('tableSlots', ctx.slots); return {}; }}); |
- slot组件代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { defineComponent, h, inject } from 'vue';export default defineComponent({ name: 'testSlots', props: ['prop1', 'prop2'], setup(props: any, ctx: any) { return { props, ctx }; }, render(getup: any) { const { props } = getup; const template = (inject('testSlots') as any)?.['test']; return h(template, props); }}); |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
