//父组件
html:
<el-button type="primary" @click="changePro">点我糖糖++</el-button>
<p>父组件<i class="el-icon-user-solid"></i>:这是几个糖糖?</p>
<i class="el-icon-lollipop" v-for="index of screenObj.count"></i>
js:
provide () { // 将datas属性提供给子孙组件
return {
grandpaData: this.screenObj
}
methods:{
changePro(){
this.screenObj.count++
}
},
子孙组件:
inject: ['grandpaData'], // 接收父组件注入的内容
watch: {
grandpaData: {
handler (value) {
this.screenWidth = value.count // 可以监听到clientWidth的改变
},
immediate: true,
deep: true
}
},