Suggest an edit

Improve this article

Refine the answer for “unidirectional data flow”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**One-way data flow** is the principle whereby **data is passed only from top to bottom**, from a **parent component to a child component**, but never the other way around.

---

## How this works in Vue.js

In Vue.js:

- The parent component passes data to the child through `props`.
- The child component **cannot mutate a prop directly** that it received - it can only use it for display or copy it into local state.
- If the parent changes the data, Vue **automatically updates** the child component.

### Example:

```javascript

<template>
  <UserCard :name="userName" />
</template>

const userName = ref('Maria')
</script>
```

```javascript

<template>
  <p>Hello, {{ name }}!</p>
</template>

If `userName` changes in the parent, the display in `UserCard` updates too.

But if you try to change `name` inside `UserCard`, Vue issues a warning:

> "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

---

## Why one-way data movement matters

1. **Predictability:**
The data flow always moves from top to bottom, so it is easier to understand where and why something changed.
2. **Transparency:**
The parent manages the state, child components only display it or notify about events.
3. **Simplified debugging flow:**
When the UI does not match the data, it is easy to find the source of the error: changes only move in one direction.

---

## How a child component notifies the parent about changes

If a child component wants to change state that belongs to the parent, it:

- **does not change it directly**, but
- **sends an event upward** through `emit`.

```javascript

<template>
  <button @click="$emit('update-name', 'Oleh')">Change name</button>
</template>
```

```javascript

<UserCard :name="userName" @update-name="userName = $event" />
```

This way, data flows down, and events flow up.
This makes the data flow **one-way and controlled**.

---

## Summary

> **One-way data flow in Vue.js** means that:
>
> - data is passed **down (props)** - from the parent to the child component,
> - and changes are initiated **up (events)** - through events.
>
> This guarantees **predictability**, **a clean architecture**, and **controlled state updates**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts379 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.