自定义组件的 v-model

2.2.0+ 新增

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

  1. Vue.component('base-checkbox', {
  2.   model: {
  3.     prop: 'checked',
  4.     event: 'change'
  5.   },
  6.   props: {
  7.     checked: Boolean
  8.   },
  9.   template: `
  10.     <input
  11.       type="checkbox"
  12.       v-bind:checked="checked"
  13.       v-on:change="$emit('change', $event.target.checked)"
  14.     >
  15.   `
  16. })

现在在这个组件上使用 v-model 的时候：

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

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。