v-model 与 修饰符.sync 的区别

hello大家好 今天我给大家简单介绍一个二者的区别

相同点 : 

        都是语法糖 

        1 都可以实现 父子组件数据的双向绑定

        2 原理都是在绑定的元素身上添加一个事件 和 对应的值

原理 :

1 v-model 等价于 监听一个 value属性  和 一个input事件 !

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

落地代码演示 : 

2 .sync 等价于 我们在监听 num的同时 监听updata的事件 把回传数据的同时 修改num的值

// 正常父传子： 
<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，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

落地代码演示 : 

不同点 : 

         1.  v-model 默认对应的是input或者textarea等组件的input事件，如果在子组件替换这个input事件，其本质和.sync修饰符一模一样。

           缺点 :  比较单一，不能有多个。

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

以上就是我总结的小知识了   我们下次见 ~!