Как сделать так, чтобы ваши пользовательские компоненты Vue поддерживали v-модель

Знаете ли вы, что вы можете использовать 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
}