vue中自定義v-model

一個組件上的 v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件，可是像單選框、複選框等類型的輸入控件可能會將 value 特性用於不一樣的目的。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。