Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Яка різниця між value та modelValue?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Різниця між `value` та `modelValue` напряму пов'язана з тим, як працює `v-model` у Vue 2 і Vue 3, особливо всередині кастомних компонентів. **Ключове:** у Vue 2 `v-model` працює через `value` + `input`, а у Vue 3 - через `modelValue` + `update:modelValue`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняРізниця між `value` та `modelValue` напряму пов'язана з тим, **як працює** `v-model` **у Vue 2 і Vue 3**, особливо всередині **кастомних компонентів**. Це дуже часте питання на співбесідах. --- ## Коротка відповідь - `value` - використовувалося для `v-model` у **Vue 2**, як проп за замовчуванням. - `modelValue` - використовується у **Vue 3** як стандартний проп для `v-model`. Тобто: > **Vue 2:** `v-model` працює через `value` + `input` > **Vue 3:** `v-model` працює через `modelValue` + `update:modelValue` --- ## Vue 2: v-model → value + input Якщо у Vue 2 компонент використовує `v-model`: ```html <MyInput v-model="text" /> ``` То всередині компонента: - проп має називатися `value` - подія має називатися `input` Приклад: ```js props: ['value'], methods: { update(e) { this.$emit('input', e.target.value) } } ``` І input виглядатиме так: ```html <input :value="value" @input="update"> ``` --- ## Vue 3: v-model → modelValue + update:modelValue У Vue 3 було введено новий, більш логічний і гнучкий стандарт. Тепер `v-model`: ```html <MyInput v-model="text" /> ``` транслюється в: - проп `modelValue` - подію `update:modelValue` Компонент: ```js props: { modelValue: String }, emits: ['update:modelValue'] ``` Шаблон: ```html <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" > ``` --- ## Чому ця зміна з'явилася у Vue 3? #### 1. Щоб підтримати **декілька** `v-model` в одному компоненті У Vue 3 можна: ```html <DatePicker v-model:start="startDate" v-model:end="endDate" /> ``` Працює через: - prop `start`, подія `update:start` - prop `end`, подія `update:end` Таку систему неможливо гнучко реалізувати з `value`. --- ## Головна різниця | Що | Vue 2 | Vue 3 | |---|---|---| | Проп за замовчуванням | `value` | `modelValue` | | Подія оновлення | `input` | `update:modelValue` | | Декілька v-model | неможливо | можливо | | Стандартизація | слабка | строга, передбачувана | --- ## Приклад порівняння «до / після» #### Vue 2 компонент: ```vue <input :value="value" @input="$emit('input', $event.target.value)"> ``` #### Vue 3 компонент: ```vue <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.