v-model与.sync的区别

v-model介绍与原理

介绍

vue中一般用于表单绑定值的时候，我们会用到一个v-model的指令，它可以在表单以及元素上面创建双向绑定数据。

原理

<com1 v-model="val"></com1> 

等价于 

<com1 :value="val" @input="val=$event.target.value"></com1>

.sync介绍与原理

介绍

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

原理

// 加上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> 

.sync与v-model区别：

相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

区别点：格式不同

v-model:

v-model=“num”

v-model： @input + value

.sync:

:num.sync=“num”

:num.sync: @update:num

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