VUE中的 provide 和 inject

在看element-ui的源码的时候，注意到源码里面有很多地方使用provide和inject的属性，然而自己在以往的VUE开发中基本没有使用过。本着不了解的原因，自己去查了VUE的官网。

provide / inject 是在 VUE 2.2.0 的版本新增的

类型：
provide: Object | () => Object

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作


inject: Array | { [key:string]:  string | symbol | Object }

注意： provide 和 inject 主要在开发高阶插件/组建库时使用。并不推荐用于普通应用程序代码中

示例

//  父组件中设置需要向子孙传递的数据
//  parent.vue




//  子孙组建需要接收祖先组建中向下传递的数据
//  child.vue

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的

Element-UI 中的案例（以 Breadcrumb 面包屑 组件为案例）

elementUI中面包屑 .png

我们可以看到 breadcrumb.vue 父组件中，通过 provide 向子孙组件提供了当前vue的实例。而breadcrumb-item.vue子组件中，通过inject属性访问了父组件中提供的elBreadcrumb的值，即当前vue的实例。这样我们就可以不用通过$parent一级一级的去访问了。

使用场景：vue有$parent属性可以让子组件访问父组件。但子孙组件想要访问祖先组件就比较困难。这时候可以通过provide/inject来实现跨级访问祖先组件的数据。