Provide/Inject 是 Vue 官方推荐的祖辈→后代跨层级通信方案，适用于主题、配置等场景；provide 在祖先组件中暴露响应式数据（推荐 Symbol 作 key），inject 在任意后代组件中获取，需注意响应性保持、调用位置及类型安全等细节。
Vue 跨层级传值不用再层层 $emit 或 props 透传，Provide 和 Inject 是 Vue 官方推荐的“祖辈→后代”通信方案，天然适合配置、主题、全局状态等场景。
Provide：在祖先组件中“提供”数据
在 setup() 中使用 provide() 函数，把需要共享的数据或方法暴露出去。它接收两个参数：注入名（字符串或 Symbol）和要提供的值。
- 可以提供响应式数据（用 ref / reactive 包裹），后代组件注入后依然保持响应性
- 推荐用 Symbol 作为 key，避免命名冲突（尤其在插件或组件库中）
- provide 的值在组件实例创建时执行，不随父组件更新而自动重提供（但响应式对象本身会更新）
示例：
<script setup><br> import { provide, ref } from 'vue'<br> const theme = ref('dark')<br> provide('appTheme', theme) // 提供响应式引用<br> </script>Inject：在任意后代组件中“注入”使用
在子、孙、曾孙等任意深度组件中，用 inject() 获取祖先提供的值。它接收注入名和可选的默认值。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
- 如果未找到对应 provide，inject 返回 undefined；传入默认值可避免报错
- 注入的是响应式引用时，直接解构会丢失响应性，应保持对 .value 的访问或用 toRef
- setup 中 inject 必须在顶层调用（不能在异步回调或条件分支里）
示例：
<script setup><br> import { inject } from 'vue'<br> const theme = inject('appTheme') // 得到 ref 对象<br> // 模板中用 {{ theme.value }}，或 script 里用 theme.value<br> </script>进阶技巧：提供修改能力 & 类型安全
只读数据不够用？可以一起 provide 修改函数，实现双向控制。
- 把 setter 和数据一起打包成对象 provide，比如 { theme, setTheme }
- TypeScript 用户可在 inject 时指定泛型，如 inject
('themeCtx') - 配合 defineComponent + 接口定义，能获得完整的类型提示和校验
注意边界：这不是状态管理替代品
Provide/Inject 解耦深，但不等于 Vuex/Pinia。它适合固定上下文关系的通信，比如 UI 组件库的主题继承、表单组件与字段联动、权限作用域隔离等。
- 避免用它传递频繁变化的业务状态（难以追踪、调试困难）
- 不要在多个不相关的祖先链中 provide 同名 key，否则可能被意外覆盖
- 服务端渲染（SSR）中需确保 provide 在所有组件实例化前完成
