Vue v-model語法糖理解及解析

v-model可以實現數據的雙向綁定，但是到底是如何實現的，爲什麼是v-model而不是別的k-value 或者 m-value或者其他

對於這塊的理解一直懵懵懂懂。

那麼官網是怎麼寫的呢

一個組件上的v-model 默認會利用名爲value的prop和名爲input的事件

就是說v-model就是value和input事件的語法糖:以下都默認props:{value:##}

<my-input v-model="msg"></my-input>
<!--語法糖的實現-->
<input :value="value" @input="$emit('input',$event.target.value)"/>

那麼對於radio和checkbox這種綁定的值不是value，改變值的事件也不是input該如何寫它的實現呢

<my-checkbox v-model="checked"></my-checkbox>
<!--語法糖-->
<input type="checkbox" :checked="value" @change="$emit('input',$event.target.checked)"/>
重點在emit出的事件還是input,傳的值是target.checked,而不是target.value

同理radio

<my-radio  v-model="radioChecked"></my-radio>
<!--語法糖 -->
<input type="radio" :checked="value" @change="$emit('input',$event.target.checked)"/>

至於爲什麼是v-model，這只是vue的定義 也可以是v-value m-value 定義出來就好