十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了Vue.js中provide/inject如何实现响应式数据更新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为平利企业提供专业的成都网站制作、网站设计,平利网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么?
parent父页面:
export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{ this.fonnB = 'new words'; // 这里仅仅foonB变化了,foo没有变化 this._provided.foo="new words"; // 这里foo变化了,但子组件获得的foo 依旧是old words console.log( this._provided); },1000) }, }
child子页面:
export default { inject:['foo'], data(){ return { chilrfoo: this.foo } }, created() { setTimeout(()=>{ // 子组件获得的foo 依旧是old words console.log( this.foo) },2000) } }
结果:
通过上面方式,经过验证,子组件页面都没办法实现响应更新this.foo的值。可能我们对官方理解还是有误,下面通过网上资料和自己构思实现了响应式数据更新
示例(结果仍不可行)
很明显上面再父组件定时器内我们是改变了数据源,这个时候我们就在想,我们改变的数据到底有没有传入到子孙组件中,那么要验证这个问题,我们不妨可以在子孙组件中手动写set 函数,computed 本身就只相当于一个get函数,当然,你也可以试试watch
parent父页面:
export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word' } } created() { setTimeout(()=>{ this.fonnB = "new words"; // 这里foo变化了,但子组件获得的foo 依旧是old words },1000) }, }
child子页面:
export default { inject:['foo'], data(){ return { childfooOld: this.foo } }, computed:{ chilrdfoo() { return this.foo } }, created () { console.log(this.foo) // -> 'old word' setTimeout(() => { console.log(this.chilrdfoo); // 这里计算属性依旧是old words }, 2000); } }
通过computed,我们都知道data中有get/set,数据也是响应式的,但为什么没更新,有点疑惑,如果有大佬知道能解释清楚的可以探讨。
但是,但是,但是!实际需求肯定没有这么简单,往往我们需要的是共享父组件里面的动态数据,这些数据可能来自于data 或者 store。 就是说父组件里面的数据发生变化之后,需要同步到子孙组件里面。这时候该怎么做呢?
我想的是将一个函数赋值给provide的一个值,这个函数返回父组件的动态数据,然后在子孙组件里面调用这个函数。
实际上这个函数存储了父组件实例的引用,所以每次子组件都能获取到最新的数据。代码长下面的样子:
Parent组件:
Parent组件
Parent组件中 name的值: {{name}}
Child组件
Child组件
GrandSon组件:
Grandson组件
{{nameFromParent}}
{{reactiveNameFromParent}}
感谢你能够认真阅读完这篇文章,希望小编分享的“Vue.js中provide/inject如何实现响应式数据更新”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!