在看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来实现跨级访问祖先组件的数据。