Vue Component Props: Passing Data Downstream

WHY IT EXISTS: Components need a way to receive data from their parents to be useful. Hardcoding data inside a component makes it static and not reusable. Props provide a clear, explicit channel for data to flow downwards, from parent to child, establishing a clear data ownership model.

THE MENTAL MODEL: Props are like function arguments for your components. A parent component "calls" a child component in its template and passes props to it, just like you'd pass arguments to a function. This makes the child's behavior dependent on the data it receives. This principle is called "one-way data flow": data flows down from parent to child via props, and should never be modified by the child.

HOW IT WORKS: You must explicitly declare the props a component accepts. In modern Vue with <script setup>, you use the defineProps() macro. You can declare props as a simple array of strings, like defineProps(['title', 'author']), but it's better practice to use an object that specifies the expected type for each prop, like defineProps({ title: String, likes: Number }). This object syntax documents the component's API and provides runtime warnings if the wrong type is passed. The parent then passes data using standard attribute syntax in its template, like <BlogPost title="My Post" :likes="42">. Notice the colon : before likes binds it to a JavaScript expression (the number 42) instead of passing a static string.

WHEN TO USE IT: Use props whenever a parent component needs to pass data to a direct child. This is the most common and idiomatic way to communicate downwards in a component tree. Examples include passing a user object to a UserAvatar component, a list of tasks to a TaskList component, or a boolean to control visibility in a Modal component.

WHEN NOT TO USE IT: Do not use props for a child to communicate back up to a parent; use custom events for that. Avoid using props to pass data between deeply nested components or siblings. For those cases, consider state management libraries like Pinia or Vue's built-in provide/inject mechanism to avoid "prop drilling" (passing props through many intermediate components). Most importantly, never try to change a prop's value from within the child component itself.

ONE CANONICAL EXAMPLE: A parent component wants to display a blog post using a child component. In the parent's template, you would write: <BlogPost title="Vue is Awesome" :likes="123" />. In the child component's script (BlogPost.vue), you declare the props: defineProps({ title: String, likes: { type: Number, required: true } }). And in the child's template, you use them: <h1>{{ title }}</h1> Likes: {{ likes }}. This creates a clear contract where the parent provides the data and the child is only responsible for displaying it.