Vue的自定義組件的 v-model的這塊將的不是很清楚，今天我們就一起來捋一下看看自定義組件中的v-model是什麼。
先看官方文檔中對v-model的解釋
v-model 指令在表單 、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理/<select>/<textarea>
那麼v-model的語法糖是什麼呢？
<code>
第一行的代碼其實只是第二行的語法糖。
/<code>
input 框擁有一個 oninput 事件，一旦輸入框內容發生變化，就會觸發 oninput ，把最新的value傳遞給 todosth。面試中經常會有人問這個問題。
$event.target.value 就是當前元素的值。
瞭解了V-model 我們再看下他在自定義組件上的使用，先看下官網的說完為看下它解決了哪些問題：
一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、複選框等類型的輸入控件可能會將 value 特性用於不同的目的。model 選項可以用來避免這樣的衝突
給組件添加 v-model 屬性時，默認會把 value 作為組件的屬性，然後把 'input' 值作為給組件綁定事件時的事件名，那麼如果我們需要是checked 屬性的時候，當點擊這個單選框的時候只會觸發 onchange 事件不會觸發 oninput 事件。
那麼自定義組件的 v-model可以通過自定義 prop/event來完成我們需要的結果，直接上代碼：
父組件
<code>
<template>
父組件將傳遞給子組件的數據是：
<child>
/<template>
/<code>
子組件：
<code>
<template>
\t
\t\t子組件將通過$emit調用父組件的函數並修改數據：{{ give }}
\t\t答覆
\t
/<template>
/<code>
這裡的 giveChildData 的值將會傳入這個名為 give 的 prop。同時當 <child> 觸發一個 returnBack 事件並附帶一個新的值的時候，這個 giveChildData 的屬性將會被更新。/<child>
閱讀更多 前端講書人麥克黑 的文章
