随时记笔记：v-model实现原理

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>