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>
