<template>
<!-- v-model 是语法糖 -->
<Input v-model="username">
<!-- 默认等效与下面这行
<Input :value="username" @input="username=$event.target.value">
-->
</template>
但是你可以通过设置 model
选项修改默认行为,比如构建勾选框组件时,将 v-model
的行将拆分为如下:
<template>
<KCheckBox v-model="model.remember"></KCheckBox>
<!-- 等效与下面这行
<KCheckBox :checked="model.remember" @change="model.remember = $event.target.value"></KCheckBox>
-->
</tempalte>
<script>
export default {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
},
name: 'test',
}
</script>
v-model 通常用于表单控件,这样子组件有更强的控制能力。
.sync
修饰符添加于 v 2.4,它能用于修改传递到子组件的属性,如果像下面这样写
<!-- 父组件 -->
<template>
<Input :value.sync="model.username">
<!-- 等效与下面这行,那么和v-model的区别只有事件名称的变化
<Input :foo="username" @update:foo="username=$event.target.value">
-->
</template>
<!-- 子组件 -->
<input @input="$emit('update:foo', $event)" />
<!-- 这里是绑定属性名称更改,相应的属性名也会变化 -->
<Input :foo="username" @update:foo="username=$event.target.value">
场景: 父组件传递的属性子组件想修改,所以
.sync
修饰符的控制能力都在父级,事件名称也相对固定update:xx
;习惯上表单元素用v-model
。