Props Explained
Props are how a parent component passes data down into a child component. They are declared explicitly by the child using defineProps inside <script setup> (or the props option in the Options API), and passed by the parent as template attributes, either as a static string (title="Dashboard") or a dynamically bound expression (:count="itemCount"). Once received, a prop behaves like a read-only reactive value inside the child — Vue tracks it as a dependency for computed properties, watchers, and template re-renders just like a local ref, but the child is not supposed to reassign it.
Cricket analogy: A captain (parent) hands a bowler (child) the field-placement instructions for the over — the bowler declares what data they expect via defineProps, reads it as a fixed plan for that over, and can't unilaterally rearrange the field mid-delivery; only the captain updates it.
Declaring and validating props
The simplest declaration form is an array of names — defineProps(['title', 'count']) — but the object form is strongly preferred for anything beyond a prototype, since it lets you specify a type, whether the prop is required, and a default value: defineProps({ title: { type: String, required: true }, count: { type: Number, default: 0 } }). In development mode, Vue validates incoming props against this schema at runtime and logs a console warning if a required prop is missing or a type doesn't match, catching integration mistakes early without needing TypeScript. For object or array defaults, the default must be provided as a factory function (e.g. default: () => []) rather than a literal, so each component instance gets its own independent default rather than sharing one mutable reference.
Cricket analogy: Simply listing prop names like ['striker','bowler'] is a rough team sheet, but the detailed form specifying type, whether a player is required, and a default squad number is what a proper team sheet does — and a default kit list must be a fresh array per player, not one shared kit bag everyone dips into.
One-way data flow
Props flow strictly one way: from parent down to child. A child must never reassign a prop directly (e.g. props.count = 5 inside the child), because the parent remains the single source of truth, and any local reassignment would simply be overwritten the next time the parent re-renders and passes the prop value again — Vue will also emit a runtime warning if you try to mutate a prop directly. If a child needs to work with a modifiable local copy derived from a prop, the idiomatic pattern is to define a local ref initialized from the prop (for values that shouldn't sync further) or a computed property (for values that should stay derived and in sync), and to communicate any change the child wants to make back up to the parent by emitting a custom event, never by mutating the prop.
Cricket analogy: A bowler can't unilaterally change the field placement the captain set; if he tried, the captain's next instruction would simply overwrite it. Instead, the bowler keeps a mental note (local ref) or requests a change by signaling the captain, who then updates the official field via emit.
<!-- ProductCard.vue -->
<script setup>
const props = defineProps({
name: { type: String, required: true },
price: { type: Number, required: true },
tags: { type: Array, default: () => [] }
})
const emit = defineEmits(['add-to-cart'])
// Derived, always-in-sync value: use a computed, never mutate props.price directly
const formattedPrice = computed(() => `$${props.price.toFixed(2)}`)
</script>
<template>
<div class="product-card">
<h3>{{ name }}</h3>
<p>{{ formattedPrice }}</p>
<span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
<button @click="emit('add-to-cart', name)">Add to cart</button>
</div>
</template>
<!-- Parent.vue -->
<template>
<ProductCard
name="Wireless Mouse"
:price="25"
:tags="['electronics', 'accessories']"
@add-to-cart="handleAddToCart"
/>
</template>Props in Vue are conceptually identical to React props — read-only data passed from parent to child, with the child forbidden from mutating them directly. Vue's addition is a declarative, runtime-validated schema (type, required, default) via defineProps, whereas React relies on TypeScript, PropTypes, or convention alone to express the same contract.
A subtle trap: initializing a local ref from a prop, like const localCount = ref(props.count), only copies the prop's value at that one moment in time — if the parent later updates count, localCount will NOT automatically update, because the ref was seeded once and has no ongoing link back to the prop. If you need the local value to track the prop's value going forward, use a computed property instead (or a watcher that explicitly re-syncs the ref), not a one-time ref initialization.
- Props pass data one-way from parent to child; the child declares them with defineProps and must never mutate them.
- The object declaration form (with type, required, default) is preferred over the array-of-strings form for runtime validation.
- Object/array prop defaults must be a factory function (default: () => []) so each instance gets an independent value.
- Vue logs development-mode warnings for missing required props, type mismatches, or direct prop mutation attempts.
- To derive a value from a prop, use a computed property to stay in sync, or explicitly watch the prop if you need a resyncing local ref.
- Communicate child-initiated changes back to the parent via emitted custom events, never by reassigning the prop.
Practice what you learned
1. What is the correct way to provide a default value for an Array-typed prop?
2. What happens if a child component directly reassigns a prop, e.g. `props.count = 5`?
3. If a child does `const localCount = ref(props.count)`, what happens when the parent later updates count?
4. Which prop declaration form enables Vue's runtime validation (type checking, required checking)?
5. How should a child component communicate a value change it wants to make to prop-derived data?
Was this page helpful?
You May Also Like
Defining and Registering Components
Covers how to author Single-File Components in Vue 3 and the difference between local and global component registration, with guidance on when to use each.
Emitting Custom Events
Learn how child components communicate upward to parents using Vue's custom event system, including typed emits and the defineEmits macro.
reactive() and ref()
A deep dive into Vue 3's two core reactivity primitives — ref() for any value type and reactive() for objects — and when to use each.
The Composition API vs Options API
Compares Vue's two component authoring styles, explaining why the Composition API was introduced and when each approach makes sense in real projects.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics