Provide/Inject 是 Vue.js 中用于跨多层组件共享数据的机制，祖先通过 provide 暴露响应式数据或方法，后代通过 inject 获取，适用于主题、国际化等松耦合场景，但非响应式系统原生部分，需配合 ref/reactive 使用且不可反向更新。
Provide 和 Inject 是 Vue.js 中用于解决深层嵌套组件间数据传递的机制，它绕过了逐层 props 透传的繁琐，让祖先组件向其任意深度的后代组件“提供”数据，后代组件则可“注入”使用。它不适用于替代常规父子通信，而是专为跨多层、松耦合的依赖场景设计。
Provide：祖先组件主动暴露数据或方法
在祖先组件（如根组件、布局组件、业务容器）中通过 provide 选项声明要向下共享的内容。它可以是对象或返回对象的函数（推荐后者，确保响应式数据正确绑定）：
- 静态值直接写在对象里，但非响应式；若需响应式，应使用 ref 或 reactive 包裹
- 方法建议定义在 setup 中并显式提供，便于类型推导和逻辑复用
- 避免在 provide 中直接传入 this（Options API）或 setup 上下文中的原始响应式对象引用，容易引发意外修改
Inject：后代组件按需获取并使用
在任意后代组件中用 inject 获取祖先提供的内容。它支持字符串键名、默认值、以及 Symbol 类型的键（推荐，避免命名冲突）：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- inject 返回值默认为 undefined，建议始终设置合理默认值（如 null、{}、() => {}）
- 在组合式 API 中，inject 可在 setup 或 script setup 中直接调用；在选项式 API 中需在 data/computed/methods 中使用
- 注入的响应式数据保持响应性，但注入的方法调用时 this 指向当前组件实例，需注意上下文
典型适用场景与注意事项
常见于主题切换、国际化、表单上下文（如 Form + Field）、权限控制、UI 组件库内部通信等需要穿透多层结构的场景：
立即学习“前端免费学习笔记（深入）”；
- Provide/Inject 不是响应式系统的一部分，但配合 ref/reactive 使用可实现响应式共享
- 它建立的是“依赖关系”，而非“通信通道”，不能反向触发更新，也不支持事件广播
- 调试困难，建议配合 TypeScript + 自定义 Hook 封装，并在 provide/inject 键名上统一管理（如用 Symbol 常量）
- 不要滥用——父子、兄弟通信优先考虑 props/emits、v-model、事件总线或状态管理库
它不是银弹，但当组件树深、中间层无关且不关心数据细节时，Provide/Inject 是轻量又自然的选择。用对了，代码更清晰；用错了，就成了隐式耦合的温床。
