极乐门资源网 Design By www.ioogu.com
vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject
首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么?
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组件:
<template> <div class="parent-container"> Parent组件 <br/> <button type="button" @click="changeName">改变name</button> <br/> Parent组件中 name的值: {{name}} <Child v-bind="{name: 'k3vvvv'}" /> </div> </template> <style scoped> .parent-container { padding: 30px; border: 1px solid burlywood; } </style> <script> import Child from './Child' export default { name: 'Parent', data () { return { name: 'Kevin' } }, methods: { changeName (val) { this.name = 'Kev' } }, provide: function () { return { nameFromParent: this.name, getReaciveNameFromParent: () => this.name } }, // provide: { // nameFromParent: this.name, // getReaciveNameFromParent: () => this.name // }, components: { Child } } </script>
Child组件
<template> <div class="child-container"> Child组件 <br/> <GrandSon /> </div> </template> <style scoped> .child-container { padding: 30px; border: 1px solid burlywood; } </style> <script> import GrandSon from './GrandSon' export default { components: { GrandSon } } </script>
GrandSon组件:
<template> <div class="grandson-container"> Grandson组件 <br/> {{nameFromParent}} <br/> {{reactiveNameFromParent}} </div> </template> <style scoped> .grandson-container { padding: 30px; border: 1px solid burlywood; } </style> <script> export default { inject: ['nameFromParent', 'getReaciveNameFromParent'], computed: { reactiveNameFromParent () { return this.getReaciveNameFromParent() } }, watch: { 'reactiveNameFromParent': function (val) { console.log('来自Parent组件的name值发生了变化', val) } }, mounted () { console.log(this.nameFromParent, 'nameFromParent') } } </script>
结果:
来自于reactiveNameFromParent ,随着祖先组件变化而变化了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无Vue.js中provide/inject实现响应式数据更新的方法示例的评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]