provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

此项API可以向定义属性的 后代组件中注入依赖，适用于三级组件及以上的嵌套，可以使注入依赖的组件获取祖先组件的数据状态，默认不是响应式的，但是你可以与vm.observable组合使用实现响应式。

9hk87-0wgh5.gif

实现逻辑：
parent.vue

<template>
  <div class="provide-inject">
    <el-button @click="() => theme.msg += 1">provide/inject</el-button>
    <Son></Son>
  </div>
</template>

<script>
import Son from './Son'
import Vue from 'vue'

export default {
  components: {
    Son
  },
  provide() {
    this.theme = Vue.observable({
      msg: 0
    })
    return {
      theme: this.theme
    }
  }
}
</script>

children.vue:

<template>
  <div class="son">
    二级页面： <span>{{ theme.msg }}</span>
    <grandson></grandson>
  </div>
</template>

<script>
import grandson from './Grandson'
export default {
  name:'Son',
  inject: {
    theme: {
      default: () => ({})
    }
  },
  components:{
    grandson
  }
}
</script>