前段時間出來面試，有一個面試?yán)蠋焼栁?code>v-model是什么施籍，我回答說其實是組件里props中的value的值和往父組件$emit事件input的語法糖實現(xiàn)。
<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的使用已經(jīng)達(dá)到了熟悉的級別，本以為回答完這些后關(guān)于v-model的問題算是完滿結(jié)束了捐川，沒成想面試?yán)蠋熒衩氐奈⑽⒁恍ψ耆鳎瑔柍隽讼旅娴膯栴}：
如果你的自定義組件里
value屬性被占用了的話奋姿，如何實現(xiàn)v-model的功能？
聽到這個問題我立馬黑人問號臉素标！
這種問題沒法顧左右而言它称诗，只能老老實實說木雞啊。
現(xiàn)在面試雖然結(jié)束了头遭，但問題并沒有結(jié)束寓免！如何在自定義組件中value被占用的情況下實現(xiàn)v-model的功能？這問題只要一有閑暇便會浮現(xiàn)出來计维，看來是必須解決了袜香！
老規(guī)矩，翻vue官檔享潜，每次看文檔的時候總會有一種以前看的假文檔的錯覺困鸥，在表單輸入綁定這塊，翻出了一些關(guān)于v-model的內(nèi)容。
基礎(chǔ)用法
你可以用 v-model 指令在表單 <input>疾就、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定澜术。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇猬腰，但v-model本質(zhì)上不過是語法糖鸟废。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理姑荷。
v-model會忽略所有表單元素的value盒延、checked、selected特性的初始值而總是將Vue實例的數(shù)據(jù)作為數(shù)據(jù)來源鼠冕。你應(yīng)該通過JavaScript在組件的data選項中聲明初始值添寺。
v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
-
text和textarea元素使用value屬性和input事件； -
checkbox和radio使用checked屬性和change事件懈费； -
select字段將value作為prop并將change作為事件计露。
對于需要使用輸入法 (如中文、日文憎乙、韓文等) 的語言票罐，你會發(fā)現(xiàn)
v-model不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程泞边，請使用input事件该押。
基礎(chǔ)用法解析
在框架越來越盛行的時代，大部分人對原生html和js的理解越來越模糊阵谚，為了徹底理解上面基礎(chǔ)用法說的是什么蚕礼，我決定用html和js對這些value、checked椭蹄、selected之類的東西再熟悉一遍闻牡。
-
<input>元素的value屬性和input事件。<input value='測試' onInput='changeValue(event)'/>function changeValue(e){ console.log(e.target.value); }
value對應(yīng)的值為輸入框的值绳矩，input事件為輸入框的值改變時發(fā)生的事件（js直接修改value值不會觸發(fā)）罩润。
假裝不知道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>
-
單選和復(fù)選的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事件為選中項發(fā)生改變時的事件。
-
<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為選中項發(fā)生改變時的事件（老規(guī)矩，js直接改變的不會觸發(fā)）中姜。
自定義組件上使用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的一般方法消玄。
到此處跟伏，似乎還是沒有解決面試?yán)蠋焼柕哪莻€問題，別急翩瓜，翻翻官檔受扳，發(fā)現(xiàn)可以設(shè)置model配置來自定義v-model相關(guān)的變量值和事件。上面自定義組件可調(diào)整如下依舊可以正常使用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>
