---
title: Vue3跨组件通信控制加载状态使用provide和inject的案例分析
description: Vue3跨组件通信控制加载状态。父组件需要等待所有子组件的API数据请求完成后，才隐藏 loading。但子组件的数据请求在各自内部完成，父组件无法直接感知，通
author: chaihongjun
category: frontend
published: 2025-08-23
url: https://chaihongjun.me/frontend/51.html
---

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

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

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

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

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

![Vue3跨组件通信控制加载状态使用provide和inject的案例分析](https://chaihongjun.me/public/uploads/images/20250823/1755936595196397.jpg)

最后总结一下，当组件之间通信，某个组件需要等待另外一个组件(或者多个组件)"反馈"一些信息之后再做动作，可以使用provide/inject方法完成。provide提供的资源可以是一个响应式数据，也可以是一个回调函数，资源的形式主要看其他组件实际需要提供者具体做什么。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/51.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。