阅读 406

vue 父子页面双向绑定对象数据不更新问题

问题

父子页面双向绑定数据,子页面使用父页面传入对象形式的data,使用$emit('update:data',data) 更新父级数据,在子页面在使用this.data时, 此时this.data依然是未更新的data对象

解决方法

	this.$emit("update:data", res.data);

	this.$nextTick(function() {
		//this.data已更新
	});
复制代码

问题产生原因

如果只更新对象的某个属性,子页面可以直接赋值,并且父子页面都会得到更新,但是如果想更新整个prop data对象,子页面赋值会报错,使用$emit更新父级data子页面使用时也不会更新这个值

产生的原因类似

	let data = { a : 1 , b : 2 } //父级组件的data
	//子组件props
	props_data = null
	
复制代码

在子组件渲染完成后

	props_data = data//父组件data
复制代码

实际上 props_data 和 data 指向都同一个对象,props_data 和 data 任何属性数据更新的时候,另外一个也会同步更新

但是如果更新整个data 对象的时候,相当于

	data = { a : 3 , b : 4 }//父组件data
	
	props_data === data //false
复制代码

此时props_data 依旧指向旧对象

等到下一次渲染的时候(异步队列),子组件更新props,这个时候重新赋值

	props_data = data//父组件data
复制代码

这时候两者就一样了

此次主要涉及深浅拷贝,eventLoop等知识点,此处不在赘述。

111.jpg

文章分类
前端
文章标签