双向数据绑定是 Vue 的一个重要特性，主要用于表单页面中。在 Vue 内置了 v-model 指令用来实现数据的双向绑定。

数据双向绑定

在官方文档中，可以很方便的找到v-model的使用示例。

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

在 input 标签中直接使用 v-model 指令，就是实现message变量的双向绑定：message 内容的变化会直接显示到页面，input 中的内容变化会引起 message 内容的同步变化。

自定义组件数据绑定

在官网的示例中提供了一个自定义组件实现 v-model 的例子：

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

使用base-checkbox

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

分析

在这个例子中，可以发现在组件的定义过程中，多了个 model 属性的设置。model 中有两个字段：

• prop
• event

model 属性就是组件对 v-model 指令信息的描述。其中的 prop 表示 v-model 绑定的数据会具体绑定在哪个 props 上，这里绑定的是 checked，event 表示 v-model 监听的事件，此事件触发的消息内容会绑定包 v-model 上。

默认情况下，prop 的值是 value，event 的值是 input。

总结

通过使用v-model使得自定义组件可以支持双向绑定，可以使表单的组件更丰富，同时还可以使得数据的获取与修改更简单。

公众号： Java码农