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)了值的綁定

實(shí)例效果.gif

• 好的，到了這里我們?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。

v-model的本質(zhì)

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ù)。