Vue.js中provide/inject实现响应式数据更新的方法示例

2023-08-11 18:51:05 161

vue.js官方文档：https://cn.vuejs.org/v2/api/#provide-inject

首先假设我们在祖辈时候传入进来是个动态的数据，官方不是说如果你传入了一个可监听的对象，那么其对象还是可响应的么？

parent父页面：

exportdefault{
provide(){
return{foo:this.fonnB}
},
data(){
return{fonnB:'oldword'}
}
created(){
setTimeout(()=>{
this.fonnB='newwords';//这里仅仅foonB变化了，foo没有变化
this._provided.foo="newwords";//这里foo变化了，但子组件获得的foo依旧是oldwords
console.log(this._provided);
},1000)
},
}

child子页面：

exportdefault{
inject:['foo'],
data(){
return{chilrfoo:this.foo}
},
created(){
setTimeout(()=>{
//子组件获得的foo依旧是oldwords
console.log(this.foo)
},2000)
}
}

结果:

通过上面方式，经过验证，子组件页面都没办法实现响应更新this.foo的值。可能我们对官方理解还是有误，下面通过网上资料和自己构思实现了响应式数据更新

示例（结果仍不可行）

很明显上面再父组件定时器内我们是改变了数据源，这个时候我们就在想，我们改变的数据到底有没有传入到子孙组件中，那么要验证这个问题，我们不妨可以在子孙组件中手动写set函数，computed本身就只相当于一个get函数，当然，你也可以试试watch

parent父页面：

exportdefault{
provide(){
return{foo:this.fonnB}
},
data(){
return{
fonnB:'oldword'
}
}
created(){
setTimeout(()=>{
this.fonnB="newwords";
//这里foo变化了，但子组件获得的foo依旧是oldwords
},1000)

},

}

child子页面：

exportdefault{
inject:['foo'],
data(){
return{
childfooOld:this.foo
}
},
computed:{
chilrdfoo(){
returnthis.foo
}
},
created(){
console.log(this.foo)
//->'oldword'
setTimeout(()=>{
console.log(this.chilrdfoo);//这里计算属性依旧是oldwords
},2000);
}
}

通过computed，我们都知道data中有get/set，数据也是响应式的，但为什么没更新，有点疑惑，如果有大佬知道能解释清楚的可以探讨。

但是，但是，但是！实际需求肯定没有这么简单，往往我们需要的是共享父组件里面的动态数据，这些数据可能来自于data或者store。就是说父组件里面的数据发生变化之后，需要同步到子孙组件里面。这时候该怎么做呢？
我想的是将一个函数赋值给provide的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。
实际上这个函数存储了父组件实例的引用，所以每次子组件都能获取到最新的数据。代码长下面的样子：

Parent组件：




.parent-container{
padding:30px;
border:1pxsolidburlywood;
}

Child组件



.child-container{
padding:30px;
border:1pxsolidburlywood;
}

GrandSon组件：



.grandson-container{
padding:30px;
border:1pxsolidburlywood;
}

结果:

来自于reactiveNameFromParent，随着祖先组件变化而变化了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue.js中provide/inject实现响应式数据更新的方法示例

热门推荐

随机推荐