Vue provide inject 实现响应式

最新推荐文章于 2025-10-13 14:50:19 发布

原创最新推荐文章于 2025-10-13 14:50:19 发布 · 6.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #provide #inject #响应式

vue 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了Vue的provide/inject选项在官方文档中提到的响应式特性。虽然直接传递的数据不是响应式的，但若传递的是可监听的对象，其属性依然可以保持响应性。博主分享了自己尝试实现这一特性的过程。

部署运行你感兴趣的模型镜像

在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)
	}
}