Implementation method of two-way data binding function of parent-child component in Vue document

Vue is a modern JavaScript framework for building web interfaces. It is favored by developers for its simplicity and ease of use, excellent performance, and detailed documentation. Among them, two-way data binding between parent and child components is one of the core functions of Vue component communication. It can quickly transfer the state of the component to the child component, monitor changes in the state of the child component and feed it back to the parent component, completing the two-way flow of data. This article will introduce the implementation method of the two-way data binding function of the parent-child component in the Vue document.

To transfer data between parent and child components, you can use the props and $emit methods, where props is the component parameter of Vue and is used to transfer data from the parent component to the child component, and the $emit method is the Vue instance. Communication method used to pass data from child components to parent components. If you need to implement two-way data binding, you need to add the .v-model modifier to the props in the parent component and trigger the input event in the child component to update the value of the parent component.

The following is an example of a parent-child component that implements two-way data binding:

// 父组件
<template>
  <div>
    <label>姓名：</label>
    <input v-model="name">
    <ChildComponent v-model="name"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <label>子组件输入：</label>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value)
    }
  }
}
</script>

In the parent component, we define a variable named name and pass it to the child component ChildComponent. In the child component, we use props to receive the value passed by the parent component, and use the v-model modifier to implement two-way data binding, bind the value of the child component to the name variable of the parent component, and use the $emit method to trigger the input Event, passing the value in the child component.

It should be noted that when using the v-model modifier in props, you must not only define the value attribute to receive the value passed by the parent component, but also define a computed attribute named value in the child component. , used to bind the value of the input box in the child component. When the value of the input box changes, use the updateValue method to trigger the input event and pass the new value in the child component to the parent component for update.

In addition to using the v-model modifier to implement two-way data binding, Vue also provides the .sync modifier to simplify the code and make it easier to read, write, and understand. In the parent component, we just replace v-model with:value.sync:

<template>
  <div>
    <label>姓名：</label>
    <input :value.sync="name">
    <ChildComponent :value.sync="name"></ChildComponent>
  </div>
</template>

In the child component, we just use this.$emit('update:value in the updateValue method ', value) method to trigger the update event, which can pass the value in the child component to the parent component for update.

The parent-child component bidirectional data binding function implementation method in the Vue document provides us with a convenient, fast, and efficient component communication method by using v-model and .sync modifiers, making it easier to implement in application development It makes it easier to realize the two-way flow of data.

The above is the detailed content of Implementation method of two-way data binding function of parent-child component in Vue document. For more information, please follow other related articles on the PHP Chinese website!