Example of data transfer between parent and child components of Vue form class

This article mainly introduces the parent-child component data transfer example of the Vue form class. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Use Vue.js for projects Development will inevitably use a component-based development method. This method does bring certain convenience to development and maintenance, but if it involves data and state transfer interaction between components, it will be a troublesome thing, especially It's 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 the trigger $emit(), but there are some differences in usage.

1. Pass basic type data

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

Let’s look at an example first:

<!-- 父组件 parent.vue -->

<template>
  <p class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </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 class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </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 the input event to the sub-component Define a method changeName. Each time this method is executed, the custom event input will be triggered and the value of the input box will be passed in.

The parent component binds a value through the v-model directive to receive the data passed by the child component. But this only means that the parent component responds to the data of 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 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, how many sub-components are there? form elements. If you still bind a value to each form element as above, you will have 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 class="parent">
    <h3>问卷调查</h3>
    <child :formData.sync="form"></child>
    <p class="">
      <p>姓名：{{form.name}}</p>
    </p>
  </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 class="child">
    <label>
      姓名：<input type="text" v-model="form.name">
    </label>
    <label>
      年龄：<input type="text" v-model="form.age">
    </label>
    <label>
      地点：<input type="text" v-model="form.address">
    </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 properties in props, we need to use the .sync modifier. For details, please 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 a value to the parent component, we still need to modify the value in data. Prop is only used as a call between parent and child. The middleman exists.

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 child component. 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 there are multiple sub-components using an object, then this writing method should be avoided, because if one component modifies the data of this object, then other sub-components will also change accordingly. .

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

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

This is in the parent Of course, the data defined in the component will not be named this way.

End

There is not much to say. I am still in the stage of using Vue and I don’t know enough about its underlying things. , I also really want to read the source code, but I always just think about it... If you think there is anything wrong, just say it, everyone can communicate with each other.

Related recommendations:

Instructions for getting started with vue forms

##

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