Skip to main content

unidirectional data flow

VueJunior~1 min read
Suggest an edit

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
<!-- Parent --> <template> <UserCard :name="userName" /> </template> <script setup> import { ref } from 'vue' import UserCard from './UserCard.vue' const userName = ref('Maria') </script>
javascript
<!-- Child component --> <template> <p>Hello, {{ name }}!</p> </template> <script setup> defineProps({ name: String }) </script>

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
<!-- Child --> <template> <button @click="$emit('update-name', 'Oleh')">Change name</button> </template>
javascript
<!-- Parent --> <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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit