vue3如何解决slot深层透传问题

更新时间：2025年04月18日 14:15:00 作者：羊城大主劦

这篇文章主要介绍了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>

总结

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

您可能感兴趣的文章:

Vue3使用indexDB缓存静态资源的示例代码
IndexedDB 是一个浏览器内建的数据库,它可以存放对象格式的数据,默认情况下,浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量,本文给大家介绍了Vue3使用indexDB缓存静态资源,需要的朋友可以参考下
2024-10-10
vue中el-autocomplete支持分页上拉加载功能
最近在项目中使用了ElementUI的el-autocomplete,下面这篇文章主要介绍了vue中el-autocomplete支持分页上拉加载功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
这篇文章主要介绍了解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020-08-08
Vuex的五大核心详细讲解
这篇文章主要为大家介绍了vuex的五个核心概念和基本使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-09-09
记一次用vue做的活动页的方法步骤
这篇文章主要介绍了记一次用vue做的活动页的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue和React组件之间的传值方式详解
这篇文章主要介绍了Vue和React组件之间的传值方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue2.X和Vue3.0数据响应原理变化的区别
这篇文章主要介绍了Vue2.X和Vue3.0数据响应原理变化的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vite+vue3项目中svg图标组件封装的过程详解
这篇文章主要介绍了vite+vue3项目中svg图标组件封装的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue.nextTick纯干货使用方法详解
这篇文章主要为大家介绍了Vue.nextTick使用方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue+Koa2+mongoose写一个像素绘板的实现方法
这篇文章主要介绍了Vue+Koa2+mongoose写一个像素绘板的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09