刚学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>
如图:
看到这里你以为.sync会取代v-model?
NO
在vue3中.sync被废弃了,功能合并到v-model中了 0.0