Vue依赖注入 provide 和 inject

最新推荐文章于 2025-07-05 15:24:58 发布

原创最新推荐文章于 2025-07-05 15:24:58 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了Vue.js中依赖注入的实现方式，包括provide和inject选项的使用，以及在Vue-cli3.0+Typescript环境下的具体实践。通过实例说明了如何在祖先组件中提供依赖，以及后代组件如何接收和使用这些依赖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

provide 选项允许我们指定我们想要提供给后代组件的数据/方法

provide 选项应该是一个对象或返回一个对象的函数

provide: function () {
  return {
    getMap: this.getMap
  }
}

// 或者

provide: {
    foo: 'bar'
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

inject 选项应该是：

一个字符串数组，或
一个对象，对象的 key 是本地的绑定名，value 是：
- 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
- 一个对象，该对象的：
  - from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
  - default 属性是降级情况下使用的 value

inject: ['getMap']

Vue-cli 3.0 + Typescript 环境下

父组件 provide

@Provide()
public componentActivity = this.getProvide()

private getProvide() {
    return 'aaaaaa'
}

// 或者

@Provide()
public componentActivity = {name:'aaaaaa'}

后代组件 Inject

@Inject()
private componentActivity: string

private created() {
   console.info(this.componentActivity)   // 'aaaaaa'
}

然而，依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的，父组件传值发生变化时，子组件接收的数据是不会对应改变的，如果需要响应传值可以考虑vuex