Vue单文件组件中多级嵌套依赖注入的核心是provide/inject组合：祖先组件用provide暴露响应式数据（推荐ref），任意深层子组件用inject接收，支持Symbol键与默认值，配合ref可保持响应式联动，适用于主题、i18n等全局状态。
Vue 单文件组件中实现多级嵌套下的依赖注入，核心是用 provide 在祖先组件“发信号”，再用 inject 在任意深层子组件“收信号”，完全跳过中间层。它不依赖 props 传递，也不要求中间组件做任何适配。
在祖先组件中使用 provide 提供数据
祖先组件（比如 App.vue 或 Layout.vue）通过 provide() 暴露数据或方法。必须在 <script setup></script> 中同步调用：
- 提供静态值：
provide('theme', 'dark') - 提供响应式数据（推荐）：
const count = ref(0); provide('count', count)—— 后代注入后仍保持响应式联动 - 可多次调用：
provide('user', user); provide('api', apiClient) - 用 Symbol 做注入名更安全，避免字符串冲突：
const themeKey = Symbol(); provide(themeKey, theme)
在任意后代组件中用 inject 接收依赖
无论嵌套几层（子、孙、曾孙……），只要在 setup 中调用 inject() 即可获取：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 基础写法：
const theme = inject('theme') - 带默认值（防祖先未提供）：
const theme = inject('theme', 'light') - 注入 Symbol 类型的 key：
const theme = inject(themeKey) - 若提供的是 ref，
inject返回的仍是 ref，需用.value读取，或配合computed使用
应用级 provide：全项目共享配置
适合主题、语言包、权限上下文等全局能力，直接在 main.js 中设置：
立即学习“前端免费学习笔记（深入）”；
app.provide('i18n', { t: (key) => translations[key] })- 所有组件都能
inject('i18n')，无需每个祖先都重复 provide - 插件开发常用此方式，例如 Vue Router 或 Pinia 的内部集成逻辑
注意事项与避坑点
依赖注入不是响应式魔法，但配合 ref 就是：
- provide 普通对象（如
{ name: 'Alice' }）后，inject 得到的是快照，后续修改不会触发更新 - 务必用
ref或reactive包裹状态，才能让子孙组件响应变化 - inject 在 setup 之外（如
data或methods）不可用；非<script setup></script>时需在setup() { return {} }中调用 - 不要滥用：仅用于跨多层、低频变更、逻辑强关联的场景；高频局部状态仍优先用 props/emits
