在看element-ui的源碼的時(shí)候，注意到源碼里面有很多地方使用provide和inject的屬性，然而自己在以往的VUE開發(fā)中基本沒有使用過。本著不了解的原因，自己去查了VUE的官網(wǎng)。

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

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

provide 選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的 property。在該對(duì)象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環(huán)境下可工作


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

注意： provide 和 inject 主要在開發(fā)高階插件/組建庫時(shí)使用。并不推薦用于普通應(yīng)用程序代碼中

示例

//  父組件中設(shè)置需要向子孫傳遞的數(shù)據(jù)
//  parent.vue
<template>
  <div id="parent">
    <p>父組件</p>
    <Child></Child>
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  name: 'parent',
  components: {
    Child
  },
  // 父組件中返回要傳給下級(jí)的數(shù)據(jù)
  provide () {  
    return {
      dataInfo: this.userInfo
    }
  },
  // 或者 寫法如下
  // provide: {
  //   dataInfo: this.userInfo
  // },
  data(){
    return {
      userInfo: {
        name: '張三',
        age：10,
        nickName:'zhangsan'
      }
    }
  },
}
</script>


//  子孫組建需要接收祖先組建中向下傳遞的數(shù)據(jù)
//  child.vue
<template>
  <div id="child">
    <p>子孫組件</p>
    <p>{{ parentInfo.name }}</p>
  </div>
</template>

<script>
  export default {
    name: "child",
    // 子孫組件中接收祖先組件中傳遞下來的數(shù)據(jù)
    inject: ['dataInfo'],
    data() {
      return {
        parentInfo: this.dataInfo
      }
    },
  }
</script>

提示：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的 property 還是可響應(yīng)的

Element-UI 中的案例（以 Breadcrumb 面包屑 組件為案例）

elementUI中面包屑 .png

我們可以看到 breadcrumb.vue 父組件中，通過 provide 向子孫組件提供了當(dāng)前vue的實(shí)例。而breadcrumb-item.vue子組件中，通過inject屬性訪問了父組件中提供的elBreadcrumb的值，即當(dāng)前vue的實(shí)例。這樣我們就可以不用通過$parent一級(jí)一級(jí)的去訪問了。

使用場(chǎng)景：vue有$parent屬性可以讓子組件訪問父組件。但子孫組件想要訪問祖先組件就比較困難。這時(shí)候可以通過provide/inject來實(shí)現(xiàn)跨級(jí)訪問祖先組件的數(shù)據(jù)。