Using vue.js for project development, it is inevitable to use component-based development, which does bring some convenience to development and maintenance, but if it involves data and state transfer interaction between components, it is a hassle, especially in the face of a large number of forms on the page.

Here is a record of my usual processing methods. This article mainly records data transmission between parent and child components, while non-parent and child components are mainly processed through Vuex. This article will not explain for the time being.

As described in the documentation, the parent component passes data to the child component mainly through props, and the child component passes data to the parent component mainly through the trigger $emit(), although there is a difference in usage.

1. Pass basic type data

When the subcomponent content is small, it directly passes basic type data, usually String, Number, and Boolean.

Here’s an example:

<! Vue --> <template> <div class="parent"> <h3> <child V-model ="form.name"></child> <div class=""> <p> name: {{form.name}}</p> </div> </template> <script> import child from './child.vue' export default {components: {child}, data () {return {form: {name: 'Please enter the name'}}}} </script>Copy the code
<! <template> <div class="child"> <label> <input type="text" :value="currentValue" @input="changeName"> </label> </div> </template> <script> export default { Props: {// This prop property must be valule, because v-bind is value value: "}, methods: {changeName (e) {// Bind a method to the input event of the input element. this.$emit('input', e.target.value) } } } </script>Copy the code

Bind a method, changeName, to the child component’s input event. Each time this method is executed, the custom input event is triggered and the value of the input box is passed in.

The parent component binds a value through the V-Model directive to receive data from the child component. If you want the child component to respond to the data passed by the parent component, you need to define a props property value for the child component. This property must be value. No other word can be used.

The V-Model is essentially a syntactic sugar. See the form input component using custom events for details.

2. Pass reference type data

When there is a lot of content in a child component, such as multiple form elements, binding values to each form element, as above, is a lot of repetitive code. So you’re usually passing an object, and the basic principle is the same, but the way you write it is a little bit different.

Let’s start with the code:

<! -- Parent component parent-vue --> <template> <div class="parent"> <h3> <child: formdata.sync ="form"></child> <div class=""> < p > name: {{form.name}}</p> </div> </div> </template> <script> import child from './child.vue' export default { components: {child}, data () {return {form: {name: 'please enter name ', age: '21'}}}} </script>Copy the code
<! <template> <div class="child"> <label> <input type="text" V-model ="form.name"> </label> <label> age: <input type="text" V-model ="form.age"> </label> <label> <input type="text" v-model="form.address"> </label> </div> </template> <script> export default { data () { return { Form: {name: ", age: ", address: "}}}, props: {// This prop property accepts values passed by the parent component formData: Object}, watch: {// Because we can't modify the properties of the props, we can't bind the formData directly to the V-model. // Here we need to listen on the formData, and when it changes, we need to assign the value to the form formData in the data: { immediate: Handler (val) {this.form = val}}}, mounted () {// props // When formData is bound to the parent component, $emit('update:formData', this.form)}} </script>Copy the code

The.sync modifier is used when the properties of props are bidirectional data flows. For details, see the. Sync modifier.

It is important to note that the props cannot be modified directly in vUE, so if we want to pass values to the parent component, we still need to modify values in data. Prop is just a middleman between the parent and the child.

In addition, if we want to preview the data originally passed by the parent component, we need to listen for changes in the prop through watch and pass in the value when the child component initializes.

Note: / / add this.$emit(‘update:formData’, this.form) to / / add this.$emit(‘update:formData’, this.form) to / / add this. Parent and child components share one object.

$emit(‘update:formData’, this.form); $emit(‘update:formData’, this.form); This. Form must also be an object.

It is also important to note that if you have multiple child components using an object, you should avoid this notation, because if one component modifies the object’s data, the other child components will change as well.

So I used to assign each child component its own object, such as:

data () {
  return {
    parentObject: {
      child_1_obj: {},
      child_2_obj: {},
    }
  }
}Copy the code

This is the data defined in the parent component, of course, not named like this.

At the end

Also nothing to say, Vue is still in the use of the stage, the bottom of the thing to understand is not enough, I also want to read the source code, but always just think….. If you think there’s something wrong, just talk to each other.