浅谈.sync与v-model

最新推荐文章于 2025-05-27 20:12:36 发布

李小港

最新推荐文章于 2025-05-27 20:12:36 发布

阅读量87

点赞数 1

本文链接：https://blog.youkuaiyun.com/m0_60695310/article/details/119699757

版权

本文介绍了Vue中.v-model和.sync修饰符在父子组件数据双向绑定上的应用。.sync允许组件接收并更新父组件的多个属性，而v-model则主要用于单一属性的双向绑定。它们都是语法糖，简化了事件处理和值同步的过程。总结了两者在格式和使用场景上的主要区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现父子组件数据之间的双向绑定，与v-model类似 .

2.类别在于：一个组件上只能有一个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> 

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

v-model

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

小结

.sync与v-model区别是

相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：
- 格式不同。 v-model="num", :num.sync="num"
- v-model： @input + value
- :num.sync: @update:num
- v-model只能用一次；.sync可以有多个。