v-model 双向绑定

本节简单看一下 v-model

先简单看一下 v-model 是如何在项目中定义并使用的。

Vue.component('base-checkbox', { 
    model: { 
        prop: 'checked', 
        event: 'change' 
    }, 
    props: { 
        checked: {
            type: Boolean,
            default: false
        }
    }, 
    template: `<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" >` 
})

<base-checkbox v-model="false"></base-checkbox>

一个组件上的 v-model 指令默认会利用组件属性 value、事件 input，但是像单选框复选框会有其他不同的属性需求，呢么可以用 model 属性来进行修改。

如上述代码所示，v-model 指令是利用原生 DOM 事件来修改响应式数据变化的，然后数据进行更新又驱动视图进行更新。