The problem

The parent page uses $emit(‘update:data’,data) to emit data from the parent page. If this. Data is used by the child page, the this.data object is still unupdated

The solution

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

	this.$nextTick(function() {
		/ / this. Data has been updated
	});
Copy the code

Cause of the problem

If only one property of the object is updated, the child page can be assigned directly and both parent pages will be updated. However, if you want to update the whole prop Data object, the child page assignment will report an error and the parent data child page will not be updated when using $emit to update it

The causes are similar

	let data = { a : 1 , b : 2 } // Data of the parent component
	// Subcomponent props
	props_data = null
	
Copy the code

After the child component is rendered

	props_data = data// The parent component data
Copy the code

In fact, props_data and data refer to the same object, and when either props_data or data is updated, the other one is also updated

But if you update the entire data object, it’s equivalent to

	data = { a : 3 , b : 4 }// The parent component data
	
	props_data === data //false
Copy the code

At this point props_data still points to the old object

At the next rendering (asynchronous queue), the subcomponent updates the props, at which point it is reassigned

	props_data = data// The parent component data
Copy the code

At this point the two are the same

This time mainly involves shallow copy, eventLoop and other knowledge points, which will not be described here.