v-model本質(zhì)是什么?如何在我們寫的自定義組件的使用v-model？
1喂分、本質(zhì)
首先我們來(lái)看看
v-model是個(gè)什么東西锦庸？其實(shí)本質(zhì)上，
v-model是v-bind以及v-on配合使用的語(yǔ)法糖：
<input v-model="test" />
// 就是相當(dāng)于:
<input :value="test" @input="value= $event.target.test" />
2蒲祈、model選項(xiàng)
（1）由上面可以知道v-model的本質(zhì)是什么甘萧，那么我們?nèi)绾卧谧远x組件上使用v-model呢？首先要了解model這個(gè)選項(xiàng)梆掸。
允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event扬卷。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event酸钦，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來(lái)達(dá)到不同的目的怪得。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。
（2）結(jié)合第一點(diǎn)的代碼概括起來(lái)是個(gè)什么意思呢？就是說(shuō)徒恋，本來(lái)默認(rèn)是這樣的：
- 子接收到的
prop值=value - 監(jiān)聽子組件觸發(fā)的
事件名event=input
（3）我們要在自定義組件上用啊蚕断，老是用默認(rèn)的那豈不是限制了我的發(fā)揮？于是入挣，vue在2.2.0版本中新增了一個(gè)model選項(xiàng)亿乳，可以讓我們這樣：
- 子接收到的
prop值="想什么值就什么值" - 監(jiān)聽子組件觸發(fā)的
事件名event="想什么事件名就什么事件名"
（4）還是有點(diǎn)蒙？沒關(guān)系径筏，實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)嘛葛假，我們來(lái)用實(shí)例跑一下，看看怎么用匠璧，不過(guò)在這之前桐款，你得先理解父子組件中的傳值、單項(xiàng)數(shù)據(jù)流是怎么一回事夷恍。
3魔眨、使用實(shí)例
-
父組件中使用
v-model
父組件中 -
子組件中的model選項(xiàng)就做了前面所說(shuō)的事情：接收到的prop就是
text，定義綁定監(jiān)聽的事件名就是onEmitFromChild酿雪。
子組件中 最后我們就可以看到在組件上實(shí)現(xiàn)了值的綁定
- 好的遏暴，到了這里我們?yōu)榱思由罾斫馔瑫r(shí)也是為了響應(yīng)開頭，達(dá)到一波首尾呼應(yīng)的強(qiáng)烈文章效果指黎，朋凉，，醋安，在子組件中（父組件不用動(dòng)）杂彭，我們注釋掉
model選項(xiàng)，使用默認(rèn)的方式吓揪，這樣應(yīng)該你能更好的再次理解v-model的本質(zhì)亲怠。（效果跟上面的gif是一樣的）
其實(shí)本質(zhì)上，
v-model是v-bind以及v-on配合使用的語(yǔ)法糖柠辞。
默認(rèn)情況下团秽，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event。
4叭首、其他
其實(shí)在我的理解中习勤，將
v-model運(yùn)用在自定義組件中實(shí)現(xiàn)值的雙向綁定，這只不過(guò)是簡(jiǎn)化了單向數(shù)據(jù)流的操作焙格。但是這種寫法可讀性不好图毕，可能在例如表單組件中可以較好的運(yùn)用這個(gè)特性以外，還是建議寧愿麻煩一點(diǎn)走個(gè)完整的單項(xiàng)數(shù)據(jù)流眷唉，如果狀態(tài)比較多就用
vuex吴旋，這樣可能更加直觀损肛，更好維護(hù)。
