> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/rabota-s-formami/nastroika-v-model-u-komponenta-1.md).

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

По умолчанию `v-model` на компоненте использует входной параметр `value` и событие `input`. Но некоторые типы полей, такие как чекбоксы или радиокнопки, могут использовать атрибут `value` для [других целей](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value). Использование опции `model` позволит избежать конфликта в таких случаях:

```javascript
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` на этом компоненте:

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

значение `lovingVue` будет передано во входном параметре `checked`. А обновляться свойство `lovingVue` будет когда `<base-checkbox>` сгенерирует событие `change` с новым значением.

{% hint style="info" %}
Обратите внимание, что вам всё равно нужно объявлять входной параметр `checked` в опции `props` компонента.
{% endhint %}