provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }

provide 和 inject 次要为高阶插件/组件库提供用例。并不举荐间接用于利用程序代码中。是2.2.0版本 新增的。
这对选项须要一起应用，以容许一个先人组件向其所有子孙后代注入一个依赖，不管组件档次有多深，并在起上下游关系成立的工夫里始终失效。

provide 选项应该是一个对象或返回一个对象的函数。该对象蕴含可注入其子孙的属性。在该对象中你能够应用 ES2015 Symbols 作为 key，然而只在原生反对 Symbol 和 Reflect.ownKeys 的环境下可工作。

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，并在组件内循环输入

实际上，你能够把依赖注入看作一部分“大范畴无效的 prop”，除了：
先人组件不须要晓得哪些后辈组件应用它提供的属性
后辈组件不须要晓得被注入的属性来自哪里

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

参考文献：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