vue3解决slot深层透传问题
问题
组件嵌套导致的层级过深，slot难以传入到指定组件，一层层传又低效，并且增加维护成本。
解决方式
利用 provide 和 inject 及 h() 函数 以及 vnode 实现slot透传
父容器中定义了插槽后，通过 provide 往后传输 slot 的虚拟 DOM 节点 (vnode)：
slot组件中使用 inject 接收到父容器传输的slots后，通过渲染函数 h() 渲染虚拟 DOM 节点 (vnode)，从而实现slot在任意深层组件使用：
使用方式
任意的深层组件引用slot组件并获取需要的slot DOM进行渲染即可
- 父容器代码：
{{ arg.code }}import { provide, defineComponent } from 'vue'; export default defineComponent({ name: 'box', setup(ctx: any) { provide('tableSlots', ctx.slots); return {}; } });
- slot组件代码：
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俱乐部。
