Vue 自定义组件中，使用 v-model 如何定制 prop 和 event

一、v-model 语法糖

v-model 指令在表单 <input>、<textarea>、<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

<input v-model="value" />

二、model 属性实现自定义组件的双向数据绑定

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

Vue.component('custome-input', {
    model: {
        prop: 'value',
        event: 'input-value'
    },
    template: `
        <input type="text" :value="value" @input="$emit('input-value', $event,target.value)" />
    `
})

如何使用呢？

<custome-input v-model="value" @input-value="handleInput" />
handleInput (e) {
    this.value = e
}

官网案例：

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>

使用 v-mode="foo" 和 model: { prop: 'checked', event: 'change' } 获得相关联后，相当于 :checked="foo"。因为 v-model 会默认绑定 checkbox 的 value 或者 checked 值。@change="val => { foo = val }"，是因为 v-model 绑定的是 value 或者 checked 值。v-model="foo"，相当于 把 model 里面的 change 事件 和 value/checked="foo" 绑定在一起了。

总结：自定义元素上使用 v-model="userName", 同时组件里面使用 model 定制 prop 和 event : { prop: xxx, event: xxx }，可以把 model 里面定义的 prop 和 event 自动绑定在 userName 这个自定义事件上。