二者相同点:都是语法糖,都可以实现父子组件中的数据的双向通信
不同点:
书写格式不同 v-model="sum", :num.sync="sum"
绑定个数不同 v-model一个组件或输入框只能绑定一个 .sync可以有多个
v-model 是@input + value的语法糖
.sync 是@update:sum 的语法糖
v-model 其在父子组件之间数据的传递方式如下
//父组件
<template>
<!--v-model是语法糖-->
<Input v-model="sum">
<!--默认等效于下面这行-->
<Input :value="sum" @input="(value)=>{sum=value}">
</template>
//子组件
<input :value="sum" @input="(e)=>{$emit('input',e.target.value)}"/>
.sync 其在父子组件之间数据的传递方式如下
//父组件
<template>
<!-- sync修饰符添它能用于修改传递到子组件的属性,如果像下面这样写 -->
<Input :foo.sync="sum">
<!-- 等效于下面这行,那么和v-model的区别只有事件名称的变化 -->
<Input :foo="sum" @update:foo="(value)=>{sum=value}">
</template>
//子组件
this.$emit('update:foo',value)