【小白读vue官方文档】vue给自定义组件设置v-model

众所周知v-model是一个语法糖，通过v-bind实现父组件向子组件传指，通过$emit实现子组件向父组件传指，这样就完成了双向数据绑定。

一个组件上的 v-model默认会利用名为 value的 prop 和名为 input的事件，但是像单选框、复选框等类型的输入控件可能会将 valueattribute 用于不同的目的。model选项可以用来避免这样的冲突：

如果是原生的html元素，实例对象上有默认的value和input属性，v-model很自然地就把value和input拿来用：把v-model="lovingVue"中的lovingVue通过v-bind绑定给value，并通过监听input事件修改父组件的值。而在自定义组件中，我们可以自己定义属性来替代value和input的角色。

官方的文档给出的案例大致如下：
我在官方文档的用例上做了一点修改，通过子组件的model属性，将绑定的props(属性)指向自定义的属性myChecked, 将监听的事件指向自定义的事件myChange。

    <div id="app">
        <base-checkbox v-model="lovingVue"></base-checkbox>
        <p>{{lovingVue}}</p>
    </div>
    <script>
        Vue.component('base-checkbox', {
            model: {
                prop: 'myChecked',
                event: 'myChange'
            },
            props: {
                myChecked: Boolean
            },
            template: `
    <input
      type="checkbox"
      v-bind:checked="myChecked"
      v-on:change="$emit('myChange', $event.target.checked)"
    >
  `
        })
        var vm = new Vue({
            el:'#app',
            data:{
                lovingVue:true
            },
            // methods:{
            //     handleChange(v){
            //         console.log(v)
            //         this.lovingVue = v
            //     }
            // }
        })
    </script>

为了更好地理解这一过程，我们把v-model的语法糖拆解，换成v-bind和v-on来表达：

    <div id="app">
        <base-checkbox :my-checked="lovingVue" @my-change="(v)=>{this.lovingVue=v}"></base-checkbox>
        <p>{{lovingVue}}</p>
    </div>
    <script>
        Vue.component('base-checkbox', {
            // model: {
            //     prop: 'myChecked',
            //     event: 'myChange'
            // },
            props: {
                myChecked: Boolean
            },
            template: `
    <input
      type="checkbox"
      v-bind:checked="myChecked"
      v-on:change="$emit('my-change', $event.target.checked)"
    >
  `
        })
        var vm = new Vue({
            el:'#app',
            data:{
                lovingVue:true
            },
            // methods:{
            //     handleChange(v){
            //         console.log(v)
            //         this.lovingVue = v
            //     }
            // }
        })
    </script>