Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «односпрямований потік даних». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Односпрямований потік даних (one-way data flow)** - це принцип, згідно з яким дані передаються тільки згори вниз, від батьківського компонента до дочірнього, але не навпаки. **Ключове:** дочірній компонент не може напряму змінювати prop, а повідомляє батька про зміни через подію (emit).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Односпрямований потік даних (one-way data flow)** - це принцип, згідно з яким **дані передаються тільки згори вниз**, від **батьківського компонента до дочірнього**, але не навпаки. --- ## Як це працює у Vue.js У Vue.js: - Батьківський компонент передає дані дочірньому через `props`. - Дочірній компонент **не може напряму змінювати prop**, який він отримав - він може лише використовувати його для відображення або скопіювати в локальний стан. - Якщо батько змінює дані, Vue **автоматично оновить** дочірній компонент. ### Приклад: ```javascript <!-- Батько --> <template> <UserCard :name="userName" /> </template> <script setup> import { ref } from 'vue' import UserCard from './UserCard.vue' const userName = ref('Maria') </script> ``` ```javascript <!-- Дочірній компонент --> <template> <p>Привіт, {{ name }}!</p> </template> <script setup> defineProps({ name: String }) </script> ``` Якщо `userName` зміниться у батька, оновиться і відображення в `UserCard`. Але якщо всередині `UserCard` спробувати змінити `name`, Vue видасть попередження: > "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders." --- ## Чому важливий односпрямований рух даних 1. **Передбачуваність:** Потік даних завжди рухається згори вниз, тому простіше зрозуміти, де і чому щось змінилося. 2. **Прозорість:** Батько керує станом, дочірні компоненти - лише відображають або повідомляють про події. 3. **Спрощений потік налагодження:** Коли UI не відповідає даним, легко знайти джерело помилки: зміни йдуть тільки в одному напрямку. --- ## Як дочірній компонент повідомляє батька про зміни Якщо дочірній компонент хоче змінити стан, що належить батьку, він: - **не змінює його напряму**, а - **надсилає подію вгору** через `emit`. ```javascript <!-- Дочірній --> <template> <button @click="$emit('update-name', 'Oleh')">Змінити ім'я</button> </template> ``` ```javascript <!-- Батько --> <UserCard :name="userName" @update-name="userName = $event" /> ``` Таким чином, дані течуть вниз, а події - вгору. Це робить потік даних **односпрямованим і контрольованим**. --- ## Підсумок > **Односпрямований потік даних у Vue.js** означає, що: > > - дані передаються **вниз (props)** - від батька до дочірнього компонента, > - а зміни ініціюються **вгору (events)** - через події. > > Це гарантує **передбачуваність**, **чисту архітектуру** та **контрольоване оновлення стану**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.