13518219792
这篇文章主要介绍了Vue.js中provide/inject如何实现响应式数据更新，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
专注于为中小企业提供做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业下冶免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
首先假设我们在祖辈时候传入进来是个动态的数据，官方不是说如果你传入了一个可监听的对象，那么其对象还是可响应的么？
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组件：
