vue自定义组件使用v-model时候的问题

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。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)"
    >
  
})

上例中的dedel中的checked、props中的checked、和$event.target.checked的checked都是不一样的。

1. model中prop指的是自定义绑定的属性名称（本例中的v-bind:checked,可以自定义，比如att等）；
2. props中的checked是接受父组件传递过来的值的变量，就是本例中v-bind:checked="checked"等号后面这个值；
3. $event.target.checked的checked指被操作的dom节点的值（此处type=“checkbox”，所有用checked接收，如果是div之类的用innerHTML也可以）

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

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

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

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