How does Vue implement custom component bidirectional binding?

If you have not read the official tutorial or looked up the information, I will throw this problem to you, you use the existing knowledge to implement, can achieve? Actually, you can. Here’s what I would do:

Let’s say I have a custom component called message-card and I need an object called obj to pass in to the child component for two-way binding purposes, and I’ll say:

<message-card :value='obj' @input='setMessage' />

Parent component:

methods:{ setMessage(e) { this.obj = e.target.value; }}Copy the code

In child components:

return data(){
   newValue: {}
},
props:{    
    value:{
        type:Object,
        default()=>{}
  },
 watch: {
    newValue(){
        this.$emit('input',this.newValue)
    }
}
}
Copy the code

What does that mean? That is, I pass in a piece of data to the child, I listen for that data in the child and throw that data out, and then I reassign that value to the object in the parent. This is two-way data binding, but the official version is simpler.

<message-card v-model='obj' />
Copy the code

This eliminates the need to assign values again in the parent component.