Vue-[v-model]理解示例

对应文档节点: https://vuefe.cn/v2/guide/components.html#Customizing-Component-v-model
<body>
    <div id="app">
        <label>父节点</label>
        <input type='checkbox' v-model='enable'>
        <br/>
        <label>子节点</label>
        <!--以下两种方式效果一致-->
        <input-checkbox v-model='enable'></input-checkbox>
        </input-checkbox>
        <!--<input-checkbox :checked="enable" @change="updateValue">
        </input-checkbox>-->
    </div>
</body>
<script>
    Vue.component('input-checkbox', {
        // 声明 props
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: ['checked'],
        template: `
            <span>
            <input
                type='checkbox'
                v-bind:checked="checked"
                v-on:change="updateValue($event.target.checked)">
            </span>
        `,
        methods: {
            updateValue: function (value) {
                //debugger
                this.$emit('change', value)
            }
        }
    });

    new Vue({
        el: "#app",
        data: {
            enable: true
        },
        methods: {
            updateValue: function (value) {
                //debugger
                this.enable = value;
            }
        }
    });
</script>