Vue定義組件的 v-model的兩種方式

這些都是很基礎，但又容易忽略的小知識點。

一、正常的註冊方法

一個組件上的 v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件。

Vue.component('base-checkbox', {
  props: {
    checked: Boolean
  },
  template: `
    <input
      v-bind:value="checked"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

二、特殊情況下

像單選框、複選框等類型的輸入控件可能會將 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)"
    >
  `
})

注意你仍然需要在組件的 props 選項裏聲明 checked 這個 prop。