Директива v-model в Vue.js используется для двусторонней привязки данных между родительским и дочерним компонентами или между элементом формы и данными компонента. Она автоматически связывает значение и событие изменения.

В Vue 3 для создания компонента с поддержкой v-model в дочернем компоненте используется функция defineModel (в Composition API) или настройка model в Options API. Это позволяет определить, какое свойство и событие будут использоваться для двусторонней привязки.

Пример использования defineModel в дочернем компоненте:

<script setup>
import { defineModel } from 'vue'

// Определяем модель с именем 'modelValue' и событием 'update:modelValue'
defineModel('modelValue')

const props = defineProps({
  modelValue: String
})

const emit = defineEmits(['update:modelValue'])

function updateValue(newValue) {
  emit('update:modelValue', newValue)
}
</script>

<template>
  <input :value="modelValue" @input="event => updateValue(event.target.value)" />
</template>

Таким образом, родительский компонент может использовать <ChildComponent v-model="someData" />, и данные будут синхронизированы.

Если defineModel недоступен, можно вручную определить проп modelValue и событие update:modelValue для поддержки v-model.

Что такое директива v-model и как использовать defineModel в дочернем компоненте?