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

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