v-model: внутреннее устройство двусторонней привязки
v-model компилируется в :modelValue + @update:modelValue, пользовательские имена v-model, v-model на компонентах
«v-model: внутреннее устройство двусторонней привязки» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что на самом деле представляет собой двусторонняя привязка
v-model выглядит как магическая двусторонняя привязка, но на самом деле это сокращение для привязки значения и обработчика события. Понимание того, во что он разворачивается, позволяет использовать его как с полями ввода, так и с пользовательскими компонентами.
Двусторонняя привязка для текстового поля
В нативном поле ввода v-model связывает значение и отслеживает события ввода. Эти две строки эквивалентны.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />Две части: привязка и прослушивание
:value передаёт состояние элементу, а @input передаёт изменения пользователя обратно в состояние. Вместе они создают двустороннее поведение.
v-model в компонентах работает иначе
В пользовательском компоненте v-model использует другую пару: свойство modelValue и событие update:modelValue. Нативные value/input предназначены только для нативных элементов.
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />Реализация v-model в дочернем компоненте
Чтобы поддерживать v-model, дочерний компонент объявляет свойство modelValue и отправляет событие update:modelValue, когда значение должно измениться.
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>Шаблон дочернего компонента
Дочерний компонент связывает входящее свойство с полем ввода и отправляет событие при изменении. Родительский компонент не знает внутренних деталей.
<template>
<input :value="modelValue" @input="onInput" />
</template>Именованные аргументы v-model
Вы можете обратиться к определённому свойству, указав имя модели: v-model:title использует свойство title и событие update:title.
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />Объявление именованной модели в дочернем компоненте
Дочерний компонент просто объявляет свойство и событие с таким же именем.
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>Несколько v-model в одном компоненте
Поскольку у каждой модели есть собственное имя, вы можете связать несколько моделей одновременно. Компонент пользовательской формы может одновременно предоставлять v-model:first и v-model:last.
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>Преимущества такого подхода
Поскольку v-model — это всего лишь свойства и события, пользовательские компоненты для своих пользователей выглядят точно как нативные поля ввода. Несколько именованных моделей позволяют одному компоненту аккуратно управлять несколькими двусторонними привязками.
Распространённая ошибка
Не изменяйте свойство modelValue напрямую внутри дочернего компонента — это нарушает однонаправленный поток свойств. Всегда отправляйте событие обновления и позволяйте родительскому компоненту управлять состоянием.
Быстрая проверка
Проверьте свои знания о внутреннем устройстве v-model.
Итоги
Вы разобрались, как работает v-model:
- В полях ввода он разворачивается в
:value+@input. - В компонентах он использует
modelValue+update:modelValue. - Именованные модели (
v-model:title) обращаются к определённым свойствам и событиям. - Вы можете использовать несколько v-model в одном компоненте.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «v-model: внутреннее устройство двусторонней привязки» бесплатный?
Да — полный текст урока «v-model: внутреннее устройство двусторонней привязки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «v-model: внутреннее устройство двусторонней привязки»?
v-model компилируется в :modelValue + @update:modelValue, пользовательские имена v-model, v-model на компонентах Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «v-model: внутреннее устройство двусторонней привязки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- v-model: внутреннее устройство двусторонней привязки
- Модификаторы событий v-on
- Динамические и множественные привязки v-bind
- Написание пользовательских директив