provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。是2.2.0版本 新增的。
這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。

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

inject 選項應該是：
一個字符串數組，或
一個對象，對象的 key 是本地的綁定名，value 是：
在可用的注入內容中搜索用的 key (字符串或 Symbol)，或
一個對象，該對象的：
from 屬性是在可用的注入內容中搜索用的 key (字符串或 Symbol)
default 屬性是降級情況下使用的 value

使用場景：由于vue有$parent屬性可以讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實現跨級訪問祖先組件的數據

一種最常見的用法是刷新vue組件
app.vue

<template>
  <div
    id="app"
  >
    <router-view
      v-if="isRouterAlive"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {
      isShow: false,
      isRouterAlive: true
  },

// 父組件中返回要傳給下級的數據
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

<template>
  <popup-assign
    :id="id"
    @success="successHandle"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
    <strong>將被分配給</strong>
    <a
      slot="reference"
      class="unite-btn"
    >
      指派
    </a>
  </popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法
  inject: ['reload'],
  components: {
    PopupAssign
  },
methods: {
    // ...mapActions(['freshList']),
    async successHandle () {
      this.reload()
    }
  }
}
</script>

這樣就實現了子組件調取reload方法就實現了刷新vue組件的功能,個人認為它實現了組件跨越組件傳遞數據方法。
下面一個例子祖組件的數據，祖孫元素調取
Ancestor.vue

<template>
    <div id="app">
    </div>
</template>
    <script>
        export default {
            data () {
                    return {
                        datas: [
                            {
                                id: 1,
                                label: '產品一'
                            },
                            {
                                id: 1,
                                label: '產品二'
                            },
                            {
                                id: 1,
                                label: '產品三'
                            }
                        ]
                    }
            },
            provide {
                return {
                    datas: this.datas
                }
            }
        }
    </script>

后代組件

<template>
    <div>
        <ul>
        <li v-for="(item, index) in datas" :key="index">
            {{ item.label }}
        </li>
        </ul>
    </div>
</template>
    <script>
        export default {
            inject: ['datas']
        }
    </script>

后代元素引入被注入數據datas，并在組件內循環(huán)輸出

實際上，你可以把依賴注入看作一部分“大范圍有效的 prop”，除了：
祖先組件不需要知道哪些后代組件使用它提供的屬性
后代組件不需要知道被注入的屬性來自哪里

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

參考文獻：https://cn.vuejs.org/v2/api/#provide-inject

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5