在看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<String> | { [key:string]: string | symbol | Object }
注意： provide 和 inject 主要在开发高阶插件/组建库时使用。并不推荐用于普通应用程序代码中
示例
// 父组件中设置需要向子孙传递的数据
// parent.vue
<template>
<div id="parent">
<p>父组件</p>
<Child></Child>
</div>
</template>
<script>
import Child from './child.vue'
export default {
name: 'parent',
components: {
Child
},
// 父组件中返回要传给下级的数据
provide () {
return {
dataInfo: this.userInfo
}
},
// 或者 写法如下
// provide: {
// dataInfo: this.userInfo
// },
data(){
return {
userInfo: {
name: '张三',
age：10,
nickName:'zhangsan'
}
}
},
}
</script>
// 子孙组建需要接收祖先组建中向下传递的数据
// child.vue
<template>
<div id="child">
<p>子孙组件</p>
<p>{{ parentInfo.name }}</p>
</div>
</template>
<script>
export default {
name: "child",
// 子孙组件中接收祖先组件中传递下来的数据
inject: ['dataInfo'],
data() {
return {
parentInfo: this.dataInfo
}
},
}
</script>
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的
Element-UI 中的案例（以 Breadcrumb 面包屑 组件为案例）
elementUI中面包屑
.png
我们可以看到 breadcrumb.vue 父组件中，通过 provide 向子孙组件提供了当前vue的实例。而breadcrumb-item.vue子组件中，通过inject属性访问了父组件中提供的elBreadcrumb的值，即当前vue的实例。这样我们就可以不用通过$parent一级一级的去访问了。
使用场景：vue有$parent属性可以让子组件访问父组件。但子孙组件想要访问祖先组件就比较困难。这时候可以通过provide/inject来实现跨级访问祖先组件的数据。
