What are props in Vue and how does one-way data flow work?
Learn what props are in Vue, how one-way parent-to-child data flow works, why you should not mutate props, and how children emit events to update parents.
Expected Interview Answer
Props are custom attributes a parent component passes down to a child to configure it, and one-way data flow means data travels only from parent to child — the child cannot directly mutate a prop.
A child declares the props it accepts (with names, types, defaults, and validation), and the parent binds values to them. When the parent's data changes, the prop updates in the child automatically, but the reverse is not allowed: mutating a prop inside the child is discouraged and warned against. To send data back up, the child emits an event that the parent listens for, keeping a clear, predictable, top-down flow of state.
- Explicit, self-documenting component inputs
- Predictable top-down data flow that is easy to debug
- Type and default validation on inputs
- Reusable, configurable child components
- Clear separation between parent state and child rendering
AI Mentor Explanation
Props are like the captain instructing a bowler on field placements and which end to bowl from. The instructions flow one way — captain to bowler. The bowler does not rewrite the captain's plan on their own; if they want a change, they signal back and the captain decides. That request-back is Vue's emit, keeping strategy flowing down and feedback flowing up.
Step-by-Step Explanation
Step 1
Declare props in the child
List accepted props with defineProps, specifying names, types, defaults, and required flags for validation.
Step 2
Pass values from the parent
Bind data in the parent template with :propName="value" or a static propName="text".
Step 3
Read props in the child
Use the props as read-only inputs to render or compute derived values.
Step 4
Do not mutate a prop
Never assign to a prop directly; copy it into local state or a computed if you need a transformed value.
Step 5
Communicate upward with emits
When the child needs to change parent state, emit an event the parent listens for and let the parent update its data.
What Interviewer Expects
- Defines props as parent-to-child inputs
- Explains one-way (top-down) data flow
- Knows mutating a prop directly is discouraged and warned
- Describes emitting events to send data back up
- Mentions prop types, defaults, and validation
Common Mistakes
- Mutating a prop directly inside the child
- Thinking data flows both ways automatically
- Confusing props with local component state
- Forgetting to bind with : for dynamic prop values
- Not using events to communicate changes back to the parent
Best Answer (HR Friendly)
“Props are the inputs a parent component gives a child to set it up, like handing a reusable card its title and image. Data flows one way, parent to child, and if the child needs to change something it sends a message back up rather than editing the input directly.”
Code Example
<!-- Child.vue -->
<template>
<button @click="$emit('increment')">{{ label }}: {{ count }}</button>
</template>
<script setup>
defineProps({
label: { type: String, required: true },
count: { type: Number, default: 0 },
})
defineEmits(['increment'])
</script>
<!-- Parent.vue -->
<template>
<Child :label="'Clicks'" :count="total" @increment="total++" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const total = ref(0)
</script>Follow-up Questions
- Why does Vue warn when you mutate a prop directly?
- How do you send data from a child back to its parent?
- How do you validate prop types and provide defaults?
- What is the difference between props and local reactive state?
- How does two-way binding with v-model relate to props and emits?
MCQ Practice
1. In Vue, how does data flow between parent and child by default?
Props establish one-way, top-down flow: parent data updates the child, but the child cannot mutate the prop directly.
2. How should a child request a change to parent state?
The child emits an event; the parent listens and updates its own state, preserving predictable one-way flow.
3. What can prop declarations include?
Props can specify type, a default value, and whether they are required, giving built-in validation.
Flash Cards
What are props? — Custom attributes a parent passes to a child to configure it — read-only inputs.
What is one-way data flow? — Data flows only parent to child; the child cannot mutate a prop directly.
How does a child change parent state? — It emits an event the parent listens for and handles.
What can a prop declaration specify? — Type, default value, required flag, and custom validation.