How to implement data transfer, modification and update of parent-child components in Vue (detailed tutorial)

Below I will share with you an article on the data transfer, modification and update methods of Vue parent-child components. It has a good reference value and I hope it will be helpful to everyone.

The data relationship between parent and child components, I will divide the situation into the following four types:

Parent component modifies child The data of the component, and updated in real time

The sub-component passes the data of the sub-component through $emit, this.$data refers to all the data in the data(return{...}) of the current component,

this.$emit('data',this.$data);

Then receive the data through the getinputdata method of the parent component

@data='getinputdata'

The data is the passed data. By modifying this data, the child component can be updated in real time through the parent component

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: 'yellow',
  border: 'none'
 };
}

Subcomponent modifies the data of the parent component

You cannot modify the data of the parent component in the subcomponent. You can only modify the data in the parent component through the $emit method above.

You can refer to the custom events on the vue official website: https://cn.vuejs.org/v2/guide/components.html#Custom events

The child component gets the parent component data, modified but not updated in real time

1. The child component transfers the data passed by the parent component through props, and then assigns the props value to the let or var declaration variable, and then uses this variable. .

let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);

2. The child component transfers the data passed by the parent component through props, and then assigns the props value to the variable in data(return{...}), and then uses this variable.

this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);

You can refer to the custom events on the vue official website: https://cn.vuejs.org/v2/guide/components.html#One-way data flow

Get the parent component The data of the child component is modified but not updated in real time.

The method here is the same as the method of 'The child component obtains the data of the parent component and is modified but not updated in real time'. Among them, only the method of passing value is the difference. The child component passes the value to the parent component through $emit.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue.js custom event form input component method

vue.js moves the array position and updates it at the same time View method

vue.js or js method to implement Chinese A-Z sorting

The above is the detailed content of How to implement data transfer, modification and update of parent-child components in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!