Vue提高13 在组件上使用v-model

v-model可以实现双向绑定：

<input v-model='text'>

实际上它是一个语法糖，等价于：

<input :value="text" @input="text = $event.target.value">

也可以用在组件上，当用在组件上时，相当于：

<Comp :value="text" @input="text = val">

为了让它正常工作，这个组件内的input必须：

1 将其value特性绑定到一个名叫value的prop上

2 在其input事件被触发时，将新的值通过自定义的input事件抛出

Vue.component('comp', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

这样就实现了组件内外的数据的双向绑定。

这个组件的v-model默认会利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能不需要value，需要的是checked，不需要oninput事件，需要的是onchange事件。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)"
    >
  `
})

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

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

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

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

参考

• Vue.js - 在组件上使用 v-model
• Vue.js - 自定义组件的 v-model
• 简书- Vue 进阶教程之：详解 v-model