vue 依赖注入provide 和 inject。。子组件可以使用父组件里面定义的函数。

一、使用场景:

根父组件A有一个方法getMap,该组件A下的所有子组件B,子组件C,子组件D,或者子组件B下的子组件E等层层嵌套情况下,在某种情况下,都需要访问父组件的getMap方法,那么常用的方法是子组件B:this.$parent.getMap(),组件E则是:this.$parent.$parent.getMap()以此类推;这种情况下,使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。

provide 和 inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效

父组件中把那个通用的函数方法放在provide里面.(data methods是同级的)

vue 依赖注入provide 和 inject。。子组件可以使用父组件里面定义的函数。

 

在子组件和孙子组件里面使用inject注入。然后就可以直接调用啦。

inject: ['foo'],
 created () {
    console.log(this.foo) // => "bar"
  }

提示:provide 和 inject 绑定并不是可响应的。provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

然而,依赖注入还是有负面影响的。它将你的应用以目前的组件组织方式耦合了起来,使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑,因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的,而不是通用化的,或者如果你想在祖先组件中更新所提供的数据,那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。