vue的.sync和v-model的区别

//v-model和.sync
<!--v-model是语法糖-->
<Input v-model="username">
<!--默认等效于下⾯这⾏-->
<Input :value="username" @input="username=$event">
// 但是你也可以通过设置model选项修改默认⾏为，Checkbox.vue
{
 model: {
 prop: 'checked',
 event: 'change'
 }
}
// 上⾯这样设置会导致上级使⽤v-model时⾏为变化，相当于
<KCheckBox :checked="model.remember" @change="model.remember = $event">
</KCheckBox>
// 场景：v-model通常⽤于表单控件，它有默认⾏为，同时属性名和事件名均可在⼦组件定义
<!-- sync修饰符添加于v2.4，类似于v-model，它能⽤于修改传递到⼦组件的属性，如果像下⾯
这样写 -->
<Input :value.sync="model.username">
<!-- 等效于下⾯这⾏，那么和v-model的区别只有事件名称的变化 -->
<Input :value="username" @update:value="username=$event">
<!-- 这⾥绑定属性名称更改，相应的属性名也会变化 -->
<Input :foo="username" @update:foo="username=$event">
// 场景：⽗组件传递的属性⼦组件想修改
// 所以sync修饰符的控制能⼒都在⽗级，事件名称也相对固定update:xx
// 习惯上表单元素⽤v-model