vue provide / inject的理解与运用

参考https://cn.vuejs.org/v2/api/#provide-inject

provide / inject理解

在vue的官方文档是这样解释的：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

简单的来讲，它作用还是为了向子组件传递数据，和prop类似。

provide / inject运用场景

既然和prop作用类似，为什么还需要provide / inject呢？

因为在现实的项目中，我的一个组件嵌套着好几层组件，如果运用prop一层层的嵌套传递，就非常的麻烦。而provide / inject就解决了这个问题，只要在顶层父级provide里声明对象或方法，那么下一层级无论多深都能够通过inject来访问到provide的数据。

有人会问为什么不用vuex，简单省事，有很多为了这个引入vuex会导致代码性价比比较低，项目本身没有使用vuex的必要

那么这种情况下provide / inject就登场了

provide 是加强版的 prop
inject 是加强版的 props

我们来看看一下栗子：

<google-map>
 <google-map-region >
   <google-map-markers></google-map-markers>
 </google-map-region>
</google-map>

我们需要向“google-map-region”和“google-map-markers”传递一个属性，我给这样，在<google-map> 添加一个provide选项， provide选项内部添加一个 getMap 方法：

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

然后在google-map-region和google-map-markers组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

inject: ['getMap']

provide / inject缺点

1.无法追踪数据的来源
在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。

2.导致组件间的耦合
它将导致组件于组件间的耦合，使得组件复用性受到影响。