Vue v-model语法糖理解及解析-优快云博客

本文深入探讨了Vue.js框架中v-model指令的工作原理，揭示其如何作为语法糖简化双向数据绑定。通过对比不同输入类型如text、radio及checkbox的实现方式，解释v-model为何绑定value属性并监听input事件，以及在特定场景下如何调整以适配不同元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 定义出来就好