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

标题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'],
> 		watch:{
> 			unameInfo:function(newVal){
> 				console.log('uname更新了',newVal);
> 			}
> 		},
> 		computed:{
> 			unameInfo(){
> 				var tempObj=this.getUname();
> 				return tempObj;
> 			}
> 		}
> }

这样就可以了