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:

<!-- 父组件 parent.vue -->
<template>
  <p>
    </p>
<h3 id="问卷调查">问卷调查</h3>
    <child></child>
    <p>
      </p>
<p>姓名：{{form.name}}</p>
    
  
</template>
<script>
  import child from &#39;./child.vue&#39;
  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p>
    <label>
      姓名：<input>
    </label>
  </p>
</template>
<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value
      value: &#39;&#39;
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。
        this.$emit(&#39;input&#39;, e.target.value)
      }
    }
  }
</script>

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:

<!-- 父组件 parent.vue -->
<template>
  <p>
    </p>
<h3 id="问卷调查">问卷调查</h3>
    <child></child>
    <p>
      </p>
<p>姓名：{{form.name}}</p>
    
  
</template>
<script>
  import child from &#39;./child.vue&#39;
  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: &#39;请输入姓名&#39;,
          age: &#39;21&#39;
        }
      }
    }
  }
</script>

<!-- 子组件 child.vue -->
<template>
  <p>
    <label>
      姓名：<input>
    </label>
    <label>
      年龄：<input>
    </label>
    <label>
      地点：<input>
    </label>
  </p>
</template>
<script>
  export default {
    data () {
      return {
        form: {
          name: &#39;&#39;,
          age: &#39;&#39;,
          address: &#39;&#39;
        }
      }
    },
    props: {
      // 这个 prop 属性接收父组件传递进来的值
      formData: Object
    },
    watch: {
      // 因为不能直接修改 props 里的属性，所以不能直接把 formData 通过v-model进行绑定
      // 在这里我们需要监听 formData，当它发生变化时，立即将值赋给 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是单向数据流，通过触发 update 事件绑定 formData，
      // 将 data 里的 form 指向父组件通过 formData 绑定的那个对象
      // 父组件在绑定 formData 的时候，需要加上 .sync
      this.$emit(&#39;update:formData&#39;, this.form)
    }
  }
</script>

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!