vue3解决slot深层透传问题


问题

组件嵌套导致的层级过深，slot难以传入到指定组件，一层层传又低效，并且增加维护成本。

解决方式

利用 provide 和 inject 及 h() 函数 以及 vnode 实现slot透传
父容器中定义了插槽后，通过 provide 往后传输 slot 的虚拟 DOM 节点 (vnode)：

slot组件中使用 inject 接收到父容器传输的slots后，通过渲染函数 h() 渲染虚拟 DOM 节点 (vnode)，从而实现slot在任意深层组件使用：

使用方式

任意的深层组件引用slot组件并获取需要的slot DOM进行渲染即可

• 父容器代码：
  

1. <template>
   
2.   <div class="TablePageBox">
   
3.     <!--父容器中使用插槽-->
   
4.     <template v-slot:test="{ arg }">
   
5.       <span class="slot-a">
   
6.         {{ arg.code }}
   
7.       </span>
   
8.     </template>
   
9.   </div>
   
10. </template>
    
11. 
    
12. <script lang="ts">
    
13. import { provide, defineComponent } from 'vue';
    
14. export default defineComponent({
    
15.   name: 'box',
    
16.   setup(ctx: any) {
    
17.     provide('tableSlots', ctx.slots);
    
18.     return {};
    
19.   }
    
20. });
    
21. </script>

复制代码

• slot组件代码：
  

1. <script lang="ts">
   
2. import { defineComponent, h, inject } from 'vue';
   
3. 
   
4. export default defineComponent({
   
5.   name: 'testSlots',
   
6.   props: ['prop1', 'prop2'],
   
7.   setup(props: any, ctx: any) {
   
8.     return {
   
9.       props,
   
10.       ctx
    
11.     };
    
12.   },
    
13.   render(getup: any) {
    
14.     const { props } = getup;
    
15.     const template = (inject('testSlots') as any)?.['test'];
    
16.     return h(template, props);
    
17.   }
    
18. });
    
19. </script>

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339908rp2.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！