Suggest an editImprove this articleRefine the answer for “What is one-way data flow?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**One-way data flow** is a principle by which data moves in only one direction: from the parent to the child component through props, while changes bubble back up through events (`emit`). **Key point:** a child component cannot directly change the parent's data, which makes the architecture predictable and controllable.Shown above the full answer for quick recall.Answer (EN)Image**One-way data flow** is a principle by which data in an application **moves in only one direction**: from the **parent -> to the child component**. This is exactly how Vue works (as does React). Put simply: > **Data is passed top-down through props, and changes bubble bottom-up through events (**`emit`**).** > **A child component cannot directly change the parent's data.** This makes the architecture predictable and controllable. --- ## What does one-way data flow look like in Vue? ### 1. Data goes **top-down** -> through **props** Parent: ```vue <Child :count="counter" /> ``` The child receives: ```js props: ['count'] ``` --- ### 2. Changes go **bottom-up** -> through **emit** The child component informs the parent: ```js this.$emit('increment') ``` The parent updates the data: ```vue <Child @increment="counter++" /> ``` --- ## Why can't props be changed in the child component? Because it would break one-way data flow. Vue deliberately makes props **readonly** to: - prevent uncontrolled changes - avoid unpredictable behavior - keep the architecture clean --- ## Why is one-way data flow needed? ### 1. Predictability You can easily tell where any value came from. ### 2. Easier debugging If data changed, it happened in the parent. ### 3. Simpler architecture Components cannot accidentally affect each other. ### 4. Avoiding the "magic" of two-way binding (in large applications, two-way binding causes confusion) ### 5. Fewer bugs Especially in a large SPA. --- ## Example of one-way flow (visually) ``` Parent data -> props -> Child Parent <- emit event <- Child ``` Only this way, and no other. --- ## Where is one-way flow broken? - when the child tries to change props - when using global variables directly - with unnecessary two-way binding of components Vue will warn: ``` [Vue warn]: Attempting to mutate prop "count" ```For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.