Vue provide inject 实现响应式
程序员文章站
2022-03-27 17:15:14
...
在Vue官方文档中指出了provide/inject
并不是响应式的:
但文档同时也说了: 如果传入了可监听的对象,对象的属性还是可响应的
但在网上并没有找到比较详细的实现方法,所以只能自己尝试实现了:
实现代码
// parent.vue
export default {
provide () {
return {
provObj: new Vue({data () {
return {foo: 'bar'}
}})
}
},
created () {
// 1秒后provide中provObj对象的foo属性值更改为'parent'
setTimeout(() => {
// this._provided 指向当前vue实例的provide对象
this._provided.provObj.foo = 'parent'
}, 1000)
}
}
// child.vue
export default {
inject: ['provObj'],
created () {
// 2秒后provObj对象的foo属性值更改为'child',所有被注入provObj对象都会被更改
setTimout(() => {
this.provObj.foo = 'child'
}, 2000)
}
}