Basic implementation method of cross-component binding using v-model in Vue

Hello everyone, today we will talk about how to use v-model to achieve the binding effect of parent-child components

1: The simple version code is as follows:

Parent component:

<template>
  <div>
  // 3: Use child components and use v-model to bind <About v-model="father"/>
  </div>
</template>

<script>
// 1: Import subcomponent import About from "./About";
export default {
// 2: Register subcomponents: {
    About,
  },
  data() {
      return {
      // Value for empty father:''
      }
  },
  //Monitor component data changes watch:{
      father(val){
          console.log(val);
      }
  }
};
</script>

Subcomponents:

<template>
  <div>
  // 2: Use v-model to bind <input type="text" v-model="son">
  </div>
</template>

<script>
export default {
    // 1: Receive information props from parent component: {
        value:{
            type:String,
            default:''
        }
    },
    data() {
        return {
        // 3: Assign empty value son:''
        }
    },
    // 4: Listen for changes watch:{
        // Assign value to son   
        value(){
        // Here this.value is the value in props
            this.son = this.value
        },
        // Pass son to the parent component son(){
            this.$emit('input',this.son)
        }
    }
}
</script>

As for why the first parameter of $emit is 'input' when the child component is passed to the parent component, those who are interested can learn about the principle of v-model implementation.

2: Let's move on to the use in the project (get the image address of the child component, pass it to the parent component, and update the image information synchronously)

Basically the same

Ⅰ: Introduce a child component into the parent component, and use v-model in the child component tag, assigning it an empty value
(The UploadImg tag is an imported subcomponent)

Ⅱ: Then use props to receive in the child component:

III: Also use v-model in the subcomponent page and assign an empty image to the data:

IV: Use watch in subcomponents to monitor their changes

Code on the decomposition diagram:

The value function assigns the passed parent component to the child component. This.value is the value in props.

value() {
      this.SonStaffPhoto = this.value
      console.log(this.SonStaffPhoto)
    }

Here is the child component function bound to v-model, which is used to pass itself to the parent component

SonStaffPhoto() {
      this.$emit('input', this.SonStaffPhoto)
    },

At this point you can assign the content you want to pass to the parent component to this.SonStaffPhoto (I assigned it to the variable used to store the image address)

V: You can also monitor changes in the parent component:

This.staffPhoto in the parent component can also be assigned the content you want to bind to it (I assigned it to the latest image variable, so that the child component image is updated and the parent component is also updated synchronously)

Summarize

This concludes this article on the basic implementation method of cross-component binding using v-model in Vue. For more relevant content on cross-component binding using v-model in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!