理解v-model
参考文档:
v-model一般用于双向绑定:
以下内容来自:vue 自定义组件使用v-model
<input v-model="something">
v-model指令其实是下面的语法糖包装而成:
<input
:value="something"
@:input="something = $event.target.value">
在一个组件上使用 v-model 时,会简化为:
<custom-input
:value="something"
@input="value => { something = value }">
</custom-input>
因此,对于一个带有 v-model 的组件,它应该如下:
- 接收一个 value prop
- 触发 input 事件,并传入新值
利用 $emit 触发 input 事件:
this.$emit('input', value);
官方文档中有讲到自定义组件的 v-model
允许一个自定义组件在使用
v-model
时定制 prop 和 event。默认情况下,一个组件上的 v-model
会把value
用作 prop 且把input
用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用value
prop 来达到不同的目的。使用model
选项可以回避这些情况产生的冲突。
如下的例子:
PersonalInfo.vue
<template>
<div>
<select
:value="phoneInfo.areaCode"
placeholder="区号"
@change="handleAreaCodeChange"
>
<option value="+86">+86</option>
<option value="+60">+60</option>
</select>
<input
:value="phoneInfo.phone"
type="number"
placeholder="手机号"
@input="handlePhoneChange"
/>
<input
:value="zipCode"
type="number"
placeholder="邮编"
@input="handleZipCodeChange"
/>
</div>
</template>
<script>
export default {
name: "PersonalInfo",
model: {
prop: "phoneInfo", // 默认 value
event: "change" // 默认 input
},
props: {
phoneInfo: Object,
zipCode: String
},
methods: {
handleAreaCodeChange(e) {
this.$emit("change", {
...this.phoneInfo,
areaCode: e.target.value
});
},
handlePhoneChange(e) {
this.$emit("change", {
...this.phoneInfo,
phone: e.target.value
});
},
handleZipCodeChange(e) {
this.$emit("update:zipCode", e.target.value);
}
}
};
</script>
<template>
<div>
<PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode" />
<PersonalInfo
:phone-info="phoneInfo"
:zip-code="zipCode"
@change="val => (phoneInfo = val)"
@update:zipCode="val => (zipCode = val)"
/>
phoneInfo: {{ phoneInfo }}
<br />
zipCode: {{ zipCode }}
</div>
</template>
<script>
import PersonalInfo from "./PersonalInfo";
export default {
components: {
PersonalInfo
},
data() {
return {
phoneInfo: {
areaCode: "+86",
phone: "111"
},
zipCode: "222"
};
}
};
</script>
...this
表示的是对象的扩展