Настройка v-model у компонента

По умолчанию v-model на компоненте использует входной параметр value и событие 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. А обновляться свойство lovingVue будет когда <base-checkbox> сгенерирует событие change с новым значением.

Обратите внимание, что вам всё равно нужно объявлять входной параметр checked в опции props компонента.

Last updated