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是同级的)

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

inject: ['getMap'],
 created () {
    console.log(this.getMap)//调用的就是他的祖先里面的函数}

 

 

 

 

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

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