幽灵资源网 Design By www.bzswh.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.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...