vue自定義組件中的v-model簡單解釋

2019 年 10 月 3 日
筆記

在使用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的一點心得，文章有疑問或錯誤的地方還請指出，感謝閱讀