Props are read-only inputs passed from parent to child—like arguments to a function. Data flows down the tree; children should not mutate props directly.
Declaring props
props: {
label: { type: String, required: true },
tone: { type: String, default: 'info' },
}In setup(), props arrive as the first argument and stay reactive when the parent updates them.
Props are read-only
If a value must change inside the child, emit an event to the parent (next lesson) or use local state derived from an initial prop. Mutating props.count++ triggers development warnings.
TypeScript note
Real projects type props with defineProps<{ ... }>() in <script setup>. This playground uses runtime prop options—the validation idea is the same.
Important interview questions and answers
- Q: Props vs state?
A: Props come from parent and are read-only in the child; local refs/reactive objects are owned by the component. - Q: Can a child change a prop?
A: Not directly—request a change via an emitted event or v-model pattern.
Self-check
- How is passing props similar to calling a function with arguments?
- Why should children not modify props directly?
Pitfall: Mutating a prop in the child breaks one-way data flow—emit an event and let the parent update state.
Interview prep
- Why are props read-only in children?
One-way data flow keeps updates predictable—the parent owns state; children request changes via emits instead of mutating props.