Ответ
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('имя'))
Ответ 18+ 🔞
Слушай, а вот эта штука defineModel в Vue 3.4 — это ж просто пиздец как удобно, ей-богу! Раньше же надо было, блядь, как обезьяна, на двух стульях разрываться: и пропсы объявлять, и эмиты, и руками всё связывать. А теперь — чих-пых, и готово.
Вот смотри, как было раньше, этот ёбаный церемониал:
<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>А теперь, представляешь? Всё это заменяется на три строчки, и волнение ебать — ноль!
<script setup>
// Ёпта, магия, блядь! Всё.
const modelValue = defineModel()
</script>
<template>
<input v-model="modelValue" />
</template>Он под капотом сам, этот хитрожопый макрос, создаёт тебе и проп modelValue, и событие update:modelValue. И родительский компонент может спокойно юзать v-model, как будто так и надо.
А если тебе нужно несколько таких привязок? Ну, типа v-model:title и v-model:description? Да похуй! Скажи ему имя, и он всё сделает.
<script setup>
const title = defineModel('title')
const description = defineModel('description')
</script>И модификаторы всякие, типа v-model.trim, тоже поддерживает. В общем, вещь, блядь! Сэкономит тебе кучу времени и нервов, которые ты обычно тратишь на эту рутину. Одним словом — овердохуища полезная фича.