Что такое DefineModel во Vue 3

Ответ

defineModel — это новый макрос в Vue 3.4+, упрощающий работу с двусторонней привязкой (v-model) в компонентах. Он автоматически создаёт проп и событие для синхронизации значения между родителем и дочерним компонентом.

Пример:

<script setup>
const modelValue = defineModel()
</script>

<template>
  <input v-model="modelValue" />
</template>

Эквивалент без defineModel:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input 
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

Особенности:

Под капотом создаёт проп modelValue и событие update:modelValue
Поддерживает модификаторы (например, v-model.trim)
Может работать с несколькими v-model (используя defineModel('имя'))