vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event

<my-checkbox v-model="foo" value="some value"></my-checkbox>


Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
})

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

  以上代码等价于：

<my-checkbox
  :checked="foo" 
  @change="val => { foo = val }"   
  value="some value">
</my-checkbox>

不简写： 

<my-checkbox
  v-bind:checked="foo" 
  v-on:change="function(val) {return foo = val }"   
  value="some value">
</my-checkbox>

 

例子解析： 

 <my-checkbox v-model="foo" value="some value"></my-checkbox>

  model: {
    prop: 'checked',
    event: 'change'
  },

同时使用 v-model="foo" 和 model: { prop: 'checked', event: 'change' },  获得相关联后，相当于 

<my-checkbox

v-bind:checked="foo"  （因为 v-model 会默认绑定 checkbox 的 value 或 checked 值）；

v-on:change="function(val) { return foo = val } （因为v-model 绑定的是value/checked 值。v-model="foo", 相当于 v-on 把 model 里的 change 事件和 value/checked="foo" 这个函数绑定在一起了 ）>

</my-checkbox>

总结：

自定义元素上使用 v-model="theFunction"， 同时，组件里使用 model {prop:xxx, event:xxx}

可以把 model 里面定义的 prop 和event 自动绑定在 "theFuntion" 这个自定义事件上