The basic implementation method of cross component binding using V-model in Vue

Hello, everyone. Today, let’s talk about the binding effect of parent-child components using V-model

1: The simple version code is as follows:

Parent component:

<template>
  <div>
  //3: use subcomponents and bind with V-model
    <About v-model="father"/>
  </div>
</template>

<script>
//1: introduction of sub components
import About from "./About";
export default {
//2: register subcomponents
  components: {
    About,
  },
  data() {
      return {
      //Empty value
          father:''
      }
  },
  //Monitor changes in component data
  watch:{
      father(val){
          console.log(val);
      }
  }
};
</script>

Sub components:

<template>
  <div>
  //2: binding using V-model
      <input type="text" v-model="son">
  </div>
</template>

<script>
export default {
    //1: receive information of parent component
    props: {
        value:{
            type:String,
            default:''
        }
    },
    data() {
        return {
        //3: null value
            son:''
        }
    },
    //4: monitor if changed
    watch:{
        //Assign value to son   
        value(){
        //Here's this Value is the value in props
            this.son = this.value
        },
        //Pass son to parent component
        son(){
            this.$emit('input',this.son)
        }
    }
}
</script>

As for why the first parameter of $emit is’ input ‘when the child component passes to the parent component, interested peers can learn about the principle of V-model implementation

2: Next, enter the use in the project (get the picture address of the child component, pass it to the parent component, and update the picture information synchronously)

Almost

I: introduce sub components into the parent component, and use V-model in the tag of sub components. The value is null
(the uploadimg tag is an imported sub component)

II: then use props in the sub component to receive:

III: in sub assemblypageUse V-model in the same way, and assign an empty picture in data:

Ⅳ: use watch in the sub assembly to monitor its changes

Code on exploded view:

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 sub component function of V-model binding, which is used to pass itself to the parent component

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

Here you can assign the content you want to pass to the parent component to this Sonstaffphoto(I assigned it to the variable used to save the image address)

Ⅴ: you can also monitor its changes in the parent component:

This in the parent component Staffphoto, you can also assign the content you want to bind to it (I assigned it to the latest image variable, so that the child component image update and the parent component update synchronously)

summary

This is the end of this article about the basic implementation methods of cross component binding using V-model for Vue. For more information about cross component binding using V-model for Vue, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!