Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке двостороннє прив'язування даних?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Двостороннє прив'язування даних (two-way data binding)** - це механізм, за якого **дані в моделі та відображення в інтерфейсі автоматично синхронізуються між собою**. **Ключове:** якщо користувач змінює значення в UI, змінюються дані в компоненті, і якщо дані в компоненті змінюються, UI оновлюється автоматично; у Vue цей механізм реалізований через директиву `v-model`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Двостороннє прив'язування даних (two-way data binding)** - це механізм, за якого **дані в моделі та відображення в інтерфейсі автоматично синхронізуються між собою.** Простіше кажучи: > **Якщо користувач змінює значення в UI -> змінюються дані в компоненті.** > **Якщо дані в компоненті змінюються -> UI оновлюється автоматично.** У Vue цей механізм реалізований через директиву `v-model`. --- ## Простий приклад ```html <input v-model="name"> <p>{{ name }}</p> ``` Якщо користувач вводить текст: ``` name = "Alex" ``` Якщо ти змінюєш змінну в коді: ```js this.name = "John" ``` - значення в input теж оновиться. Це і є двостороннє прив'язування. --- ## Як це працює під капотом Vue перетворює: ```html <input v-model="name"> ``` на два механізми: 1. **Одностороннє прив'язування (model -> view):** ```html :value="name" ``` 2. **Зворотне прив'язування (view -> model):** ```html @input="name = $event.target.value" ``` Vue автоматично об'єднує це у зручний синтаксис. --- ## Що дає двостороннє прив'язування? #### Економить код Тобі не потрібно писати вручну обробники `input`, `change`, `keyup`. #### Спрощує форми Особливо багатоелементні, як-от валідації. #### Синхронний UI UI завжди відображає актуальні дані. --- ## Двостороннє прив'язування в компонентах (Vue 3) ```html <MyInput v-model="value" /> ``` Працює через: - проп: `modelValue` - подію: `update:modelValue` Компонент: ```vue <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> </template> ``` --- ## Відмінність від одностороннього прив'язування | Вид прив'язування | Що робить | |---|---| | одностороннє (one-way) | Оновлює лише UI при зміні даних | | двостороннє (two-way) | UI і дані оновлюють одне одного | Приклад одностороннього: ```html <input :value="name"> ``` UI не можна використовувати для зміни моделі.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.