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>
    <!--父容器中使用插槽-->
    <template v-slot:test="{ arg }">
      <span>
        {{ arg.code }}
      </span>
    </template>
  </div>
</template>

<script>
import { provide, defineComponent } from 'vue';
export default defineComponent({
  name: 'box',
  setup(ctx: any) {
    provide('tableSlots', ctx.slots);
    return {};
  }
});
</script>

• slot组件代码：

<script>
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>