vue中v-model与.sync修饰符的使用差异

v-model

使用方式

• 父组件：
  • 父组件通过v-model绑定值。
  • 如需根据v-model传入的值改变，而触发其他更新需要通过watch监听。
• 子组件：
  • 声明model对象 设置事件event和prop字段
  • 通过porps接受父组件传送值
  • 修改是通过this.$emit广播事件
• 示例代码:

// 父组件
<template>
  <children v-model="message"></children>
</template> 
<script> import children from "./children.vue";
export default {  
  components: {children},  
  data() {    
    return {      
      message: "parent"   
     };
  },  
  watch: {    
    // 监听message变化    
    message(n, o) {
      console.log(n, o);    
     }  
  } 
}; 
</script>

// 子组件
<template>  
  <h1>{{ message }}</h1> 
</template>
<script>
export default {  
  model:{    
    prop: "message", // 这个字段，是指父组件设置 v-model 时，将变量值传给子组件的 msg 
    event: "input" // 这个字段，是指父组件监听 parent-event 事件  
  },  
  props: {
     //此处必须定义和model的prop相同的props，因为v-model会传值给子组件 
    message: String    
},  
  mounted() {    //这里模拟异步将msg传到父组件v-model，实现双向控制    
    setTimeout(_ => {      
      this.$emit("input", "children");      
      //将这个值通过 emit 触发parent-event，将some传递给父组件的v-model绑定的变量   
     }, 1500);  
  }
}; 
</script>

本质

v-model本质上就是一个语法糖。相当于为父组件绑定了一个props与更新事件，当子组件数据更新时，实质上是调用了input事件来改变父组件的值：

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

.sync

使用方法

• 父组件：
  • 通过修改触发事件input为update:myPropName实现相同效果
• 子组件：
  • 通过修改this.$emit(update:myPropName)
• 示例代码:

// 父组件
<template>
  <Children :messag.sync="message"/>
</template> 
<script> import children from "./children.vue";
export default {  
  components: {children},  
  data() {    
    return {      
      message: "parent"   
     };
  },  
  watch: {    
    // 监听message变化    
    message(n, o) {
      console.log(n, o);    
     }  
  } 
}; 
</script>

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

本质

.sync是为了实现对props的双向绑定。比如，现在有一个包含title prop的组件，可以用以下方法表达对其赋新值的意图：
this.$emit('update:title', newTitle)；
然后父组件可以监听那个事件并根据需要更新一个本地的数据属性：

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

两者差异
两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定。v-model 是 .sync的一种体现（prop是value，vm.$emit('update:input')）。.sync 比较灵活，v-model比较单一。
v-model能在像单选框、复选框等类型的输入控件中实现双向绑定，但是如果它使用在一个组件上，就无法实现双向绑定，因为从它的本质上看，它就是绑定value值，监听input事件，通过event拿到新的value并赋值给value。
总的来说，v-model倾向于“value”，是组件最终的操作结果。.sync倾向于“change”，它是父组件获取子组件状态的一种快捷方式，否则我们很可能需要用事件来判断子组件状态。是一种update操作。

参考文章：vue中v-model和.sync修饰符区别