//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
vue的.sync和v-model的区别
最新推荐文章于 2024-04-15 16:40:42 发布