你知道v-model和.sync的区别吗?

192 阅读1分钟

刚学vue的人都会学到一个属性v-model这个属性对于vue的数据驱动视图是必不可少的,它可以双向绑定数据,

v-model的原理

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

本质是语法糖,会生成value和input

在vue进一步学习中我们会了解到一个和v-model拥有同样功能的属性,它就是 .sync

.sync的属性功能和v-model一样都是用来双向绑定数据,但是v-model一个组件里只能写一个,但是.sync可以写多个

.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>
  

如图:

Snipaste_2022-06-09_19-47-38.png 看到这里你以为.sync会取代v-model? NO 在vue3中.sync被废弃了,功能合并到v-model中了 0.0