Provide / Inject
时间: 2025-05-24 14:50:12 浏览: 15
### Provide 和 Inject 的概念
Provide 和 Inject 是 Vue 3 实现依赖注入的关键机制。父组件能够通过 `provide` 提供数据,而任何后代组件则可以通过 `inject` 获取这些数据[^1]。
### Provide 方法详解
`provide` 主要用于父级组件向其所有子孙组件提供共享的数据或功能。这使得在整个子树内传播信息变得更加容易,尤其是在处理全局配置项或是需要广泛访问的状态时非常有用。为了使提供的属性具有响应性,应当利用 `ref()` 或者 `reactive()` 来创建响应式对象[^3]。
```javascript
// 父组件 ParentComponent.vue 使用 setup() 函数的方式
import { provide, ref } from 'vue';
export default {
name: "ParentComponent",
setup() {
const title = ref("默认标题");
// 将响应式变量作为可注入的内容暴露出去
provide('title', title);
return {};
}
}
```
### Inject 方法详解
相对地,`inject` 则是在那些希望接收到由祖先节点所提供的资源的地方调用的方法。它可以是一个字符串名称列表或者是带有选项的对象形式指定所需注入的键名及其对应的解析逻辑。对于非响应性的简单值来说,一旦被消费端捕获之后就不会再随源变化而同步更新;而对于基于 `ref`/`reactive` 构建起来的服务实例,则可以在整个生命周期里保持最新状态并触发视图重绘[^4]。
```javascript
// 子组件 ChildComponent.vue 接收来自上级提供的数据
import { inject } from 'vue';
export default {
name: "ChildComponent",
setup() {
// 注入名为'title'的响应式引用
const title = inject('title');
return { title };
},
template: `<div>{{ title }}</div>`
};
```
### Provide vs Inject 的主要差异
| 特征 | Provide | Inject |
|--|
| **角色定位** | 负责向外发布可供下游使用的公共资产 | 用来声明当前上下文中期望获得哪些外部供给 |
| **作用范围** | 可影响到所有的直系及间接下层组件 | 仅限于自身以及更深层嵌套的后代 |
| **传递内容** | 支持任意 JavaScript 值 | 同样支持各种 JS 类型 |
| **响应特性** | 需显式转换为 Ref/reactive 才能维持动态效果 | 自动继承自上游提供的响应行为 |
阅读全文
相关推荐

















