在使用iview框架的時候，經常會看到組件用v-model雙向綁定數據，與傳統步驟父組件通過props傳值子組件，子組件發送$emit來修改值相比，這種方式避免操作子組件的同時再操作父組件，顯得子組件的封裝效果更好。所以，個人認為，我們自己封裝組件也應該有這樣的思維，父組件通過slot或者props傳值，由子組件完成一些效果，再拋出必要的事件讓父組件接受，這樣組件的可復用性就很強，有利於多次使用。
v-model指令是什么?
剛剛提到，iview通過v-model雙向綁定數據，所以首先我們要明白v-model在這個過程中做了什么。有vue基礎的同學應該知道，v-model本質是一個語法糖，在v-bind和v-on的整合。表單元素比如input，v-bind綁定一個值，就把data數據傳給了value，同時再通過v-on監聽input事件，當表單數據改變的時候，也會把值傳給data數據，代碼如下
<input type='text' v-model='msg'> // 相當於 <input type='text' :value=msg @input='msg =$event.target.value'>vue2.2新增model API
雖說新增，實際上vue3.0都已經發布了，這其實算個比較舊特性，官網是這么寫的
允許一個自定義組件在使用 v-model 時定制 prop 和 event。默認情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以回避這些情況產生的沖突。這句話比較長，咱們來一步步理解，首先是第一句
- 允許一個自定義組件在使用v-model時定制prop和event
一般說來，v-model用在表單元素上進行數據的雙向綁定，自定義組件通常通過父子組件傳值綁定數據
- 默認情況下，一個組件上的
v-model會把value用作prop且把input用作event
前邊說了，v-model是v-bind和v-on的語法糖，那么這里v-model就完成兩個步驟
舉一個栗子
比如
// 父組件 <Child v-model='iptValue'></Child> // 子組件 Vue.components('Child',{ model: { prop: ipt, evnet: change } props: { ipt: Number } template: `<input type='number' :value='ipt' @change='$emit("change",parseInt($event.target.value))'>` })這里父組件中的v-model相當於
<Child :value='iptValue' @change='value => iptValue = value'></Child>用文字解釋下上面的代碼
前面說了，父子組件傳值通過prop和$emit，第一步父組件把iptValue通過prop傳給了子組件，但要注意，我這里的子組件給prop取了一個別名叫做ipt作為區分,所以子組件的prop對象中的鍵為我取的別名ipt。第二步，當子組件input值改變的時候，子組件監聽了一個onchange方法，注意我這里也給$emit中的事件取了一個別名，只不過這個別名和原來的名字一樣change，input值改變emit提交change事件並把新值傳給父組件，又又又要注意，$emit的荷載都是字符串....
然后就跟上面代碼一樣
父組件執行value => iptValue = value語句，這樣就完成了父子組件數據的雙向綁定
個人覺得v-model用在自定義組件最大的好處是提高了組件的封裝性，父組件不必要另外寫一個接受子組件發送給來的$emit方法
- 最后是第三句話，
但是一些輸入類型比如單選框和復選框按鈕可能想使用 value prop 來達到不同的目的
其實這很容易理解，因為value字符串在input中是有意義的，取別名有利於區分，不太重要啦這一小部分...
結束
那么以上就是個人對於自定義組件v-model的一點心得，文章有疑問或錯誤的地方還請指出，感謝閱讀