v-model仅仅是一个语法糖。
<input type="text" v-model="msg" />
上面一行代码是v-model非常常用的一种形式,它等同于下一行代码,就是下一行代码的语法糖。
<input v-bind:value="msg" @input="msg=$event.target.value" />
所以,实际上v-model的实现,第一步是通过v-bind绑定value值,第二步通过触发input事件,传递数据。
v-model在组件中使用,如下图代码所示:
<div id="app">
<my-com v-model="msg"></my-com>
<!--这一行代码和上一行代码执行效果一样,是上一行代码的语法糖-->
<my-com :value="msg" @input="msg=arguments[0]"></my-com>
{{msg}}
</div>
<script>
Vue.component('my-com',{
props:['value'],
// 传value值的原因是v-model默认绑定了value属性,而使用input事件的原因是组件绑定的是input事件
template:`
<div>
<input :value="value" @input="$emit('input',$event.target.value)" />
</div>
`
})
var vm = new Vue({
el:'#app',
data:{
msg:'cc'
}
})
</script>