vue3如何解决slot深层透传问题
作者：羊城大主劦
这篇文章主要介绍了vue3如何解决slot深层透传问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3解决slot深层透传问题
问题
组件嵌套导致的层级过深，slot难以传入到指定组件，一层层传又低效，并且增加维护成本。
解决方式
利用 provide 和 inject 及 h() 函数 以及 vnode 实现slot透传
父容器中定义了插槽后，通过 provide 往后传输 slot 的虚拟 DOM 节点 (vnode)：
slot组件中使用 inject 接收到父容器传输的slots后，通过渲染函数 h() 渲染虚拟 DOM 节点 (vnode)，从而实现slot在任意深层组件使用：
使用方式
任意的深层组件引用slot组件并获取需要的slot DOM进行渲染即可
- 父容器代码：
<template>
<div class="TablePageBox">
<!--父容器中使用插槽-->
<template v-slot:test="{ arg }">
<span class="slot-a">
{{ arg.code }}
</span>
</template>
</div>
</template>
<script lang="ts">
import { provide, defineComponent } from 'vue';
export default defineComponent({
name: 'box',
setup(ctx: any) {
provide('tableSlots', ctx.slots);
return {};
}
});
</script>
- slot组件代码：
<script lang="ts">
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);
}
});
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。