Vue3跨组件通信控制加载状态使用provide和inject的案例分析

核心问题：跨组件通信控制加载状态。父组件需要等待所有子组件的API数据请求完成后，才隐藏 loading。但子组件的数据请求在各自内部完成，父组件无法直接感知，通过provide和inject方法可以让父组件得到反馈。

案例：

父组件需要等待子组件banner加载之后，才隐藏loading。这里子组件banner内部实际是有一个API的请求方法：

// 子组件

import { inject, onMounted } from 'vue';


onMounted(async () => {
  try {
    const res = await fetchBanner(); //API请求
    if (res.code === 0) {
      banners.value = res.data;
    }
  } catch (error) {
    console.error("Banner加载失败:", error);
  } finally {

  }
});

构想是父组件页面加载的时候先显示loading动画，然后等待子组件API数据请求完毕了，再隐藏loading动画，然后正确的显示父组件页面。那么就需要子组件在完成数据请求之后“通知”父组件。这里可以使用provide/inject达到这个目的。当然除了父子组件关系，其他层级关系的组件也可以是使用provide/inject。

首先，需要在父组件内provide提供一个资源，这里是一个函数将给到子组件进行调用，这个函数作用是用来记录子组件加载完成这个事情（计数）。

//父组件

import { ref, provide } from 'vue';

const loadedCount = ref(0);          // 已完成加载的组件计数
const expectedLoadCount = 2;         // 预期需要加载的子组件总数


// 注册组件加载完成的函数
// 当某子组件加载完成，这个函数将被执行一次
const registerComponentLoad = () => {
  loadedCount.value++; //计数器
  console.log(`组件加载完成: ${loadedCount.value}/${expectedLoadCount}`);
  
  // 当所有子组件加载完成时关闭loading
  if (loadedCount.value >= expectedLoadCount) {
    loading.value = false;
  }
};

// 将函数提供给所有后代组件
provide('registerComponentLoad', registerComponentLoad);

子组件需要在合适的地方调用父组件给的资源，这里是计数函数：

//子组件

import { ref,inject, onMounted } from 'vue';

const banners = ref([])

// 从父组件注入注册函数（默认空函数防止报错）
const registerComponentLoad = inject('registerComponentLoad', () => {});

onMounted(async () => {
  try {
    const res = await fetchBanner(); //API请求
    if (res.code === 0) {
      banners.value = res.data;
    }
  } catch (error) {
    console.error("Banner加载失败:", error);
  } finally {
    // 无论成功/失败都通知父组件"我已完成"
    registerComponentLoad();
  }
});

子组件在完成API请求，并将结果赋值给对应的响应式变量之后，去执行provide的函数。这样预期的效果就实现了。

Vue3跨组件通信控制加载状态使用provide和inject的案例分析