.sync与v-model的异同点

113 阅读1分钟

相同点:

都是语法糖 都可以实现父子组件中的数据双向通信,优点是减少了代码量 下面连个案例中可以看出

v-model的原理

v-model的常用写法

 <input v-model="val" type="text"> 

v-model的完整写法

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

.sync 修饰符的原理

.sync的简单写法

<son :age.sync="num"></son> 

.sync的完整写法

<son:age="age" @update:age="val=>age=val"></son>

不同点

1. 格式不同

  • v-model="number"
  • :number.sync="number"

2.原理不同

  • 2.1 v-model:@input + value 默认是input事件
  • 2.2 :number.sync:@updata:nnumber
    1. v-model只能使用一次,sync可以使用多次