vue2 provideinject实现响应式数据更新

标题vue2 provide/inject实现响应式数据更新

1、问题描述

父组件
export default {
provide:function(){
return {
uname:‘’
}
},
created(){
this.uname=‘holle world’
}
}

子组件
export default {
inject:[‘uname’],
mounted(){
console.log(this.uname)
}
}
上面的代码在子组件的mounted生命周期中输出的uname并没有改变

2、解决方案
在provide中用一个函数返回想要传递给后代组件的数据，具体实现如下代码

父组件
export default {
provide:function(){
return {
getUname:()=>this.uname,
}
},
data(){
return {
uname:‘’
}
},
created(){
this.uname=‘holle world’
}
}

子组件
export default {
inject:[‘getUname’],
mounted(){
console.log(this.getUname())
}
}

这样就可以了