.sync与v-model的区别

.sync作用:实现父子组件数据之间的双向绑定

一:.sync与v-model的共同点
 都是语法糖,都可以实现父子组件中的数据的双向通信。  

.sync实现通信的方式:

// 父组件

 

// 子组件



v-model实现通信的方式:(默认是input事件)
// 父组件

 

// 子组件


二:.sync与v-model的不共同点

  1. 格式不同

.sync 父组件 :a.sync 子组件 @update:a

v-model 父组件 v-model: 子组件 @(input , value)

  1. 一个组件可以多个属性用.sync修饰符,可以同时"双向绑定多个“prop”,而并不像v-model那样,一个组件只能有一个。

例:

// 父组件


// 子组件


三:功能的作用场景:

1.v-model针对更多的是最终操作结果,是双向绑定的结果,是value,是一种change操作。
比如:输入框的值、多选框的value值列表、树结构最终绑定的id值列表(ant design和element都是)、等等...
2..sync针对更多的是各种各样的状态,是状态的互相传递,是status,是一种update操作。
比如:组件loading状态、子菜单和树结构展开列表(状态的一种)、某个表单组件内部验证状态、等等...

你可能感兴趣的:(.sync与v-model的区别)