Знаете ли вы, что вы можете использовать v-model
не только в собственных элементах ввода (например, <input>
), но и в своих пользовательских компонентах ввода?
Если, например, у вас есть настраиваемый компонент для выбора нескольких значений, вы можете использовать его следующим образом:
<multi-value-input v-model="tags"/>
Вместо этого:
<multi-value-input
:value="tags"
@input="setTags"
/>
Если у вас действительно есть компонент, который принимает значение через :value
prop и обновляет его через событие @input
, v-model
будет работать из коробки!
Так вот и весь фокус. Ваш компонент должен использовать value
prop и @input
событие для поддержки v-model
.
Наконец, если вы хотите использовать другое имя опоры / события и по-прежнему поддерживать v-model
, вы должны использовать параметр model
в своем компоненте, например:
model: {
prop: 'checked', // instead of value
event: 'changed' // instead of input
}