自定義組件實現v-model

自定義組件也是可以實現v-model雙向綁定的。
Vue 官方文檔介紹如下：

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

 

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>

　　

需要注意的是：

1. model:{prop:'checked'} 這里的checked 必須在props 里也有聲明；
2. model.prop 綁定的變量命名不能是關鍵字。如：value
3. model.prop綁定的變量不要在自定義組件里直接改動。需要調用model.event來修改綁定的變量的值。例如，上面的例子，就不能在自定義組件內再對checked進行雙向綁定。