实现逻辑
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>
