Summary of data transfer methods for Vue form class parent-child components

This time I will bring you a summary of the data transfer methods of the Vue form class parent-child component. What are the precautions for the data transfer of the Vue form class parent-child component. The following is a practical case, let's take a look.

If you use Vue.js for project development, you will inevitably use a component-based development method. This method does bring certain convenience to development and maintenance, but if it involves data and data between components, State transfer interaction is a troublesome thing, especially when facing a page with a lot of forms.

Here I will record my usual processing methods. This article mainly records the data transfer between parent and child components. Non-parent and child components are mainly processed through Vuex. This article will not explain it for the time being.

Same as the solution given in the document, the parent component transmits data to the child component mainly through props, and the child component transmits data to the parent component mainly through trigger $emit(), just in usage It will be a little different.

1. Pass basic type data

#When the sub-component has less content, basic type data will be passed directly, usually String, Number , Boolean three types.

Let’s look at an example first:

Bind a method changeName to the input event of the subcomponent. Each time this method is executed, the custom event input will be triggered and the value of the input box will be changed. Pass it in.

The parent component binds a value through the v-model directive to receive the data passed by the child component. But this only responds to the data of the child component from the parent component. If you want the child component to respond to the data passed by the parent component, you need to define a props attribute value for the child component, and this attribute must be value and cannot be written with other words.

v-model is actually a syntactic sugar. For details, please refer to the form input component using custom events.

2. Pass reference type data

When there is a lot of content in the sub-component, for example, the sub-component has multiple form elements, if there are still If you bind a value to each form element as above, you will need to write a lot of repeated code. So what is usually passed at this time is an object. The basic principle of value passing remains the same, but the writing method will be slightly different.

Let’s look at the code first:

props is a one-way data flow. When we need to bidirectionally bind the properties in props, we need to use the .sync modifier. Please check for details. Refer to the .sync modifier, which will not be described here.

It should be noted here that props cannot be modified directly in vue, so if we want to pass values ​​to the parent component, we still need to modify the values ​​in data. Props only exist as the middleman for the call between father and son. .

In addition, if we want to preview the data initially passed by the parent component, we need to monitor the prop changes through watch and pass the value in when the child component is initialized.

Note: I put this.$emit('update:formData', this.form) in mounted in the subcomponent. The reason is to avoid loading each input The custom event is triggered in the input event of the tag, but the premise of writing this is that the parent and child components must share the same object.

This is what the above code says. When using: formData.sync="form" to bind a value in the parent component, form is an object, and the custom event in the child component is triggered this.$emit(' update:formData', this.form) , this.form must also be an object.

It should also be noted here that if multiple sub-components use an object, then this writing method should be avoided, because if one component modifies the data of this object, other sub-components will also change accordingly. .

So when I use it, I allocate an object of its own to each sub-component, for example:

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}

This is the data defined in the parent component. Of course, the name will not be chosen like this. .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of vue components

Detailed explanation of the use of vue cropping preview component

The above is the detailed content of Summary of data transfer methods for Vue form class parent-child components. For more information, please follow other related articles on the PHP Chinese website!