第11篇：Provide/Inject（跨组件通信）

目标：掌握跨层级组件通信的核心方式

---

1. 基础用法

---

2. 响应式数据传递

---

3. 使用Symbol避免命名冲突

// keys.js  
export const THEME_KEY = Symbol('theme')  

// 祖先组件  
import { THEME_KEY } from './keys'  
provide(THEME_KEY, 'dark')  

// 后代组件  
const theme = inject(THEME_KEY)  

---

4. 实战场景

1. 主题切换：全局主题配置

2. 多语言支持：全局语言包

3. 用户信息：跨多层传递用户数据

4. UI组件库：配置全局默认样式

---

5. 注意事项

• 不要滥用：优先考虑Props/Emits，仅在多层嵌套时使用

• 响应式维护：通过ref/reactive包装数据

• 类型安全：使用TS时建议定义注入数据的类型

interface User {  
  name: string  
  age: number  
}  

const user = inject('user')  

---

代码规范建议：

• 对重要数据提供更新方法（而非直接修改注入值）

• 为注入数据设置合理的默认值

• 使用Symbol管理大型应用的provide key