Настройка 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
с новым значением.
Last updated
Was this helpful?