前段时间出来面试，有一个面试老师问我v-model是什么，我回答说其实是组件里props中的value的值和往父组件$emit事件input的语法糖实现。
<template>
<input type='text' :value='inputValue' @input='changeValue($event)'>
</template>
<script>
export default {
data(){
return {
inputValue: 'aaa',
}
},
methods: {
changeValue(e){
this.inputValue = e.target.value;
}
}
}
</script>
一般能够说出这个说明整体对vue的使用已经达到了熟悉的级别，本以为回答完这些后关于v-model的问题算是完满结束了，没成想面试老师神秘的微微一笑，问出了下面的问题：
如果你的自定义组件里
value属性被占用了的话，如何实现v-model的功能？
听到这个问题我立马黑人问号脸！
这种问题没法顾左右而言它，只能老老实实说木鸡啊。
现在面试虽然结束了，但问题并没有结束！如何在自定义组件中value被占用的情况下实现v-model的功能？这问题只要一有闲暇便会浮现出来，看来是必须解决了！
老规矩，翻vue官档，每次看文档的时候总会有一种以前看的假文档的错觉，在表单输入绑定这块，翻出了一些关于v-model的内容。
基础用法
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
-
text和textarea元素使用value属性和input事件； -
checkbox和radio使用checked属性和change事件； -
select字段将value作为prop并将change作为事件。
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现
v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。
基础用法解析
在框架越来越盛行的时代，大部分人对原生html和js的理解越来越模糊，为了彻底理解上面基础用法说的是什么，我决定用html和js对这些value、checked、selected之类的东西再熟悉一遍。
-
<input>元素的value属性和input事件。<input value='测试' onInput='changeValue(event)'/>function changeValue(e){ console.log(e.target.value); }
value对应的值为输入框的值，input事件为输入框的值改变时发生的事件（js直接修改value值不会触发）。
假装不知道vue中可以对input直接使用v-model，那么自己封装的组件如下：
<template>
<input ref='input' @input='changeValue'/>
</template>
<script>
export default {
name: 'model-input',
mounted(){
this.$refs.input.value = this.value;
},
props: {
value: String,
},
methods: {
changeValue(e){
this.$emit('input',e.target.value);
}
},
watch: {
value(newVal){
if(this.$refs.input.value !== newVal) this.$refs.input.value = newVal;
}
}
}
</script>
-
单选和复选的checked属性和change事件。
<input type='radio' name='fruits' id='apple' value='apple' onChange='chooseFruit(event)'>
<label for='apple'>苹果</label>
<input type='radio' name='fruits' id='banana' value='banana' onChange='chooseFruit(event)' checked>
<label for='banana'>香蕉</label>
function chooseFruit(e){
console.log(e.target.checked);
}
checked为选中项，change事件为选中项发生改变时的事件。
-
<select>元素的value属性和change事件。
<select id='carBrand' onChange='selectBrand(event)'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
function selectBrand(e){
console.log(e.target.value);
}
<select>的value值为选中的<option>的value值，change为选中项发生改变时的事件（老规矩，js直接改变的不会触发）。
自定义组件上使用v-model
<template>
<div>
<span>{{num}}</span>
<button @click='addNum'>增加</button>
</div>
</template>
<script>
export default {
data(){
return {
num: null,
}
},
props: {
value: Number,
},
mounted(){
this.num = this.value;
},
methods: {
addNum(){
this.$emit('input',++ this.num);
}
},
watch: {
value(newVal){
if(this.num !== newVal) this.num = newVal;
}
}
}
</script>
以上便是是自定义组件上使用v-model的一般方法。
到此处，似乎还是没有解决面试老师问的那个问题，别急，翻翻官档，发现可以设置model配置来自定义v-model相关的变量值和事件。上面自定义组件可调整如下依旧可以正常使用v-model。
<template>
<div>
<span>{{num}}</span>
<button @click='addNum'>增加</button>
</div>
</template>
<script>
export default {
data(){
return {
num: null,
}
},
props: {
notValue: Number,
},
model: {
prop: 'notValue',
event: 'notInput',
},
mounted(){
this.num = this.notValue;
},
methods: {
addNum(){
this.$emit('notInput',++ this.num);
}
},
watch: {
notValue(newVal){
if(this.num !== newVal) this.num = newVal;
}
}
}
</script>
