原文链接：http://www.geeee.top/2019/04/03/vue-v-model/ 转载请注明出处
v-model
v-model 是vue的一个语法糖，用于在表单控件或者在组件上创建双向绑定。双向绑定即修改model后界面view会自动更新，如果用户更新了view，model的数据也会自动更新。
表单控件上使用v-model
<template>
<div>
<input type="text" placeholder="请输入姓名" v-model="name"/>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
}
}
</script>
自定义组件的v-model
自定义组件中定义的props，是单向的，只能是父级向子组件传递，父级prop的更新会向下流动到子组件中，但是子组件不能修改父级的prop数据。 但有时候又有一些场景，需要子组件能够修改父组件传递过来的数据，此时就可以通过v-model实现。
用法：
设置组件的model选项，该选项值是个object有两个键prop和event，通过prop指定进行双向绑定的属性，event指定该组件中什么事件触发后，更新prop
举例：定义一个组件，该组件有两个属性photoInfo和，zipCode, 其中photoInfo是Object类型可双向绑定。
// 组件定义personalInfo.vue
<template>
<div>
<select :value="city" @change = "handleAreaCodeChange" placeholder="区号">
<option>北京</option>
<option>上海</option>
</select>
<input
:value="phoneInfo.phone"
type="number"
placeholder="手机号"
@input="handlePhoneChange"
/>
<input
:value="zipCode"
type="number"
placeholder="邮编"
@input="handleZipCodeChange"
/>
</div>
</template>
<script>
export default {
model {
prop: 'name',
event: ''
},
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:personInfo.zipCode", e.target.value);
},
}
}
</script>
在index.vue中使用该组件
// 组件调用
<template>
<personal-info v-model="personInfo" :zipCode="zipCode"
@update:zipCode="val => (zipCode = val)"></personal-info>
</template>
<script>
import personalInfo from './personalInfo.vue'
export default {
components: {
personalInfo
},
data() {
personInfo: {areaCode: "+86", phone: ""},
zipCode: "",
}
}
</script>
注意：
如果没有设置model选项，组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
v-model的本质
其实就是vue提供的一个语法糖，它等价于 v-bind: + v-on:
<input v-model="something"/>
等价于
<input v-bind:value="something" v-on:input="something = $event.target.value"/>