在使用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 選項可以迴避這些情況產生的衝突。
 

這句話比較長，咱們來一步步理解，首先是第一句

1. 允許一個自定義元件在使用v-model時定製prop和event

一般說來，v-model用在表單元素上進行資料的雙向繫結，自定義元件通常通過父子元件傳值繫結資料

1. 預設情況下，一個元件上的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方法

1. 最後是第三句話，但是一些輸入型別比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的

其實這很容易理解，因為value字串在input中是有意義的，取別名有利於區分，不太重要啦這一小部分...

結束

那麼以上就是個人對於自定義元件v-model的一點心得，文章有疑問或錯誤的地方還請指出，感謝閱