v-model

Usage mode

• Parent component:
  • The parent component binds values through v-model.
  • If you need to change according to the value passed in by v-model, and trigger other updates, you need to listen through watch.
• Sub components:
  • Declare model object to set event and prop fields
  • Accept parent pass through value via porps
  • The modification is to broadcast the event through this.$emit
• Example code:

// Parent component
<template>
  <children v-model="message"></children>
</template> 
<script> import children from "./children.vue";
export default {  
  components: {children},  
  data() {    
    return {      
      message: "parent"   
     };
  },  
  watch: {    
    // Monitor message changes    
    message(n, o) {
      console.log(n, o);    
     }  
  } 
}; 
</script>

// Sub components
<template>  
  <h1>{{ message }}</h1> 
</template>
<script>
export default {  
  model:{    
    prop: "message", // This field refers to the msg that passes the variable value to the child component when the parent component sets the v-model 
    event: "input" // This field means that the parent component listens for the parent event event event  
  },  
  props: {
     //Here, you must define the same props as the model's prop, because v-model will pass values to subcomponents 
    message: String    
},  
  mounted() {    //Here, we simulate asynchronous transfer of msg to the parent component v-model to realize bidirectional control    
    setTimeout(_ => {      
      this.$emit("input", "children");      
      //Trigger parent event through emit, pass some to v-model bound variable of parent component   
     }, 1500);  
  }
}; 
</script>

essence

v-model is essentially a grammar sugar. It is equivalent to binding a props and update event for the parent component. When the data of the child component is updated, the input event is actually called to change the value of the parent component:

<template>
    <Children :message="message" @input="(event) => { message = event }"/> 
</template>

.sync

Usage method

• Parent component:
  • The same effect is achieved by modifying the trigger event input to update:myPropName
• Sub components:
  • By modifying this.$emit(update:myPropName)
• Example code:

// Parent component
<template>
  <Children :messag.sync="message"/>
</template> 
<script> import children from "./children.vue";
export default {  
  components: {children},  
  data() {    
    return {      
      message: "parent"   
     };
  },  
  watch: {    
    // Monitor message changes    
    message(n, o) {
      console.log(n, o);    
     }  
  } 
}; 
</script>

// Sub components
<template>  
  <h1>{{ message }}</h1> 
</template>
<script>
export default {  
  props: {
    message: String    
  },  
  mounted() {  
    setTimeout(_ => {      
      this.$emit("update:messag", "children");      
     }, 1500);  
  }
}; 
</script>

essence

. sync is to implement the two-way binding to props. For example, now there is a component that contains title prop. You can express your intention to assign a new value to it in the following ways:
this.$emit('update:title', newTitle)；
Then the parent component can listen to that event and update a local data property as needed:

<template>
  <Children :title="title" @update:title="title = $event"/> 
</template>

Difference between them
Both of them are syntactic sugar in essence, and their purpose is to realize the bidirectional binding between components and external data. v-model is an embodiment of. Sync (prop is value, vm.$emit('update:input ')). . sync is more flexible and v-model is more single.
v-model can realize two-way binding in input controls such as radio box and check box, but if it is used on a component, it cannot realize two-way binding, because in essence, it is binding value, listening for input events, getting new value through event and assigning it to value.
Generally speaking, v-model tends to be "value", which is the final operation result of the component. . sync tends to be "change", which is a shortcut for the parent component to get the state of the child component. Otherwise, we may need to use events to determine the state of the child component. Is an update operation.

Reference article: Difference between v-model and. sync modifier in vue