文科少女學程式

一般提到v-model，大家應該都知道它的作用是資料的雙向綁定，也知道他到底有多麼的方便，這次讓我們進一步來了解在自定義元件上該如何使用v-model。

什麼是在自定義元件上使用v-model？
以往使用v-model的時候，都是很單純地在要使用的input標籤上寫上v-model，並且在v-model上綁定一組資料(如下圖)，這就是一種預設好的v-model使用方式。

但是上述的用法是在同個元件中的input標籤上使用v-model，
如果是將input用子元件拆出來以自定義元件放到父元件中，就會需要將v-model的拆解來使用。
也就是=>v-bind綁定value屬性和v-on綁定input事件

在自定義元件上為什麼需要用不一樣的方式使用v-model？
因為「當input變成子元件，用v-model綁定的值是從父元件傳入，但在子元件中透過input更改值後，想要將這個更改後的值回傳回父元件的data中，就必須用不一樣的方式傳，無法單純的使用一般v-model的用法。」

讓我們來看看單純將v-model放在父元件中的子元件上，但子元件的input標籤不做任何動作，實際上會發生什麼樣的事情。

父元件：

子元件：

1. inputValue2的值沒有套用到用子元件插入的input預設值。
2. 即使輸入內容，但是data中的inputValue2也沒有變化。
會出現這樣的狀況，主要是因為沒有另外把父元件用v-model綁定的value屬性用props設定到子元件中，
也沒有用子元件傳值給父元件的方式(用emit把值再回傳回去)的緣故。
 

另外，若想要使用div做成一個可輸入的元件使用(contenteditable="true")，
也必須使用v-model拆解的方式來實現v-model的功能。

自定義元件上使用v-mode的方式
了解為什麼原本v-model的方式無效後，緊接著讓我們來看看該怎麼使用吧！
使用方式就是「將v-model功能實現(v-bind+v-on)的方法拆解出來使用。」

直接來看一下拆解的步驟：
1. 透過v-model將預設的value屬性和input事件綁定到放置在父元件的子元件上。
=>此時子元件綁定的value屬性就是v-model中帶的data值，以下例子中的value就是inputValue2。

上面內容中子元件裡的v-model其實等同於以下這個寫法。

2. 在子元件中透過props接收從父元件的v-model綁定到子元件上的value屬性。

用props接收父元件傳入的value資料後，就可以從Vue devtools上看到props資料。

不過這個時候，input標籤的value還沒套用到props的資料，所以input欄位還是空的。

3. 接著透過v-bind把props的value綁定在子元件的input標籤上，這時候input欄位才會顯示props的值。


4. 最後還要在子元件的input上用v-on綁定input事件，並且透過emit觸動父元件中置入的子元件上的input事件，
實現自定義元素上的v-model效果。

這麼做的話，即使是父元件中的子元件，一樣可以實現v-model的用法。

父元件和子元件傳資料的相互的關係我覺得其實可用以下這個小故事來了解。
爸爸(父元件)和兒子(子元件)有各自的帳戶(data)，當兒子想拿錢(input進去的值)孝敬爸爸時，
無法直接幫爸爸把錢存進帳戶，只能用emit把錢拿給爸爸，並且告訴爸爸記得存錢，
爸爸有錢要拿給兒子時，一樣也無法直接幫兒子存款，要透過props拿給兒子，兒子才有辦法拿到錢，
差異只在於拿錢給兒子的時候，不需要提醒兒子把錢拿去存，因為兒子非常愛錢，他只要接收到錢(props)，
自己就會記得把錢存起來放在帳戶(data)。

Vue3上的v-model使用差異
在Vue3中一樣有v-model指令，不過有以下幾點不同的地方。
1. 透過v-bind綁定的預設屬性從value改名為modelValue。
2. 透過v-on綁定的input事件變為update:modelValue。
3. 一個元件變成可以放置多個v-model。
=> 可以用活用在多個input標籤的內容被組裝成一整組元件來使用情境，
當每次固定需要四條input的時候，就不用在父元件上寫四個內部只含一個input標籤的子元件。

以上就是這次針對v-model微深入理解整理的內容，
如果有說明不太正確的地方，也歡迎找我討論。
就先這樣啦！掰餔^^