vue2中v-model和.sync的区别

相同点

v-model和.sync都是语法糖，都可以实现父子组件中的数据的双向通信，且原理基本一致

区别点

1. 子组件抛出的事件名不同。

   • v-model是 $emit("input",新值)
   • .syncs是 $emit('update:属性名',新值)

2. v-model只能有一个；.sync可以有多个

3. vue对表单元素做了兼容处理，默认支持v-model

原理

v-model的原理

 <com1 v-model="num"></com1>
 等价于
 <com1 :value="num" @input="(val)=>this.num=val"></com1>
复制代码

.sync修饰符的原理

 // 正常父传子： 
 <com1 :a="num" :b="num2"></com1>

 // 加上sync之后父传子： 
 <com1 :a.sync="num" .b.sync="num2"></com1> 

 // 它等价于
 <com1 
   :a="num" @update:a="val=>num=val"
   :b="num2" @update:b="val=>num2=val"></com1> 

 // 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。
复制代码

拓展

vue3删除了.sync语法，并将其功能合并到v-model中了（vue3不支持.sync； vue3中支持多个v-model） 查看这里