Vue组件依赖注入

封面图 • 2025-10-07 • Vue

在 Vue 中，**依赖注入（Dependency Injection）** 是一种组件间通信的方式，尤其适用于 **跨层级组件通信**。它允许父组件向其子孙组件“注入”数据或方法，而不需要通过 `props` 一层层传递。

---

## ✅ 一、Vue 2 和 Vue 3 的区别

- **Vue 2** 使用 `provide/inject` 实现依赖注入。
- **Vue 3** 同样支持 `provide/inject`，并且新增了 `inject` 函数（在组合式 API 中使用）。

---

## ✅ 二、基本用法（Vue 2 & Vue 3）

### 1. 父组件中使用 `provide`

```vue

<template>
  <ChildComponent />
</template>

> 注意：`provide` 必须是一个函数，返回一个对象，这样可以确保每次渲染时都能获取到最新的值。

---

### 2. 子组件中使用 `inject`

```vue

<template>
  <div>{{ injectedMessage }}</div>
</template>

---

## ✅ 三、Vue 3 组合式 API 中的 `provide/inject`

### 1. 父组件中使用 `provide`

```vue

<template>
  <ChildComponent />
</template>

const message = ref('Hello from parent')

// 提供数据
provide('message', message)
</script>
```

> 在 `<script setup>` 中，可以直接使用 `provide` 和 `inject`，但需要引入 `provide` 和 `inject`。

---

### 2. 子组件中使用 `inject`

```vue

<template>
  <div>{{ message }}</div>
</template>

const message = inject('message')
</script>
```

---

## ✅ 四、注意事项

| 特性 | 说明 |
|------|------|
| **响应性** | 如果 `provide` 的值是响应式的（如 `ref` 或 `reactive`），子组件中的 `inject` 也会保持响应性。 |
| **不推荐频繁使用** | 依赖注入虽然方便，但会增加组件之间的耦合度，建议只用于深层嵌套组件通信。 |
| **命名冲突** | 如果多个父组件都提供了相同名称的属性，后者的优先级更高。 |

---

## ✅ 五、适用场景

- 跨多层组件共享配置信息（如主题、语言、用户信息等）
- 全局状态管理（替代 `Vuex` 的简单情况）
- 避免层层传递 `props`

---

## ✅ 六、示例：全局主题切换

### 父组件（提供主题）

```vue
<template>
  <button @click="toggleTheme">切换主题</button>
  <ChildComponent />
</template>

### 子组件（注入主题）

```vue
<template>
  <div :class="theme">当前主题：{{ theme }}</div>
</template>

---

## ✅ 总结

| 方法 | 用途 | 适用版本 |
|------|------|----------|
| `provide/inject` | 深层组件通信 | Vue 2 / Vue 3 |
| `props` | 父子组件通信 | 所有版本 |
| `event bus` | 非父子组件通信 | Vue 2 / Vue 3 |
| `Vuex` / `Pinia` | 全局状态管理 | Vue 2 / Vue 3 |

---

如果你有具体的使用场景或问题，欢迎继续提问！