How to Use Props in Vue: Simple Guide with Examples

In Vue, props are custom attributes you pass from a parent component to a child component to share data. You declare props in the child component using the props option and access them inside the template or script. This lets components communicate and reuse data easily.

Syntax

To use props in Vue, declare them in the child component's props option as an array or object. Then, pass values from the parent component using attributes with the same name. Inside the child, access props directly in the template or script.

• props: Defines expected props in the child.
• Parent usage: Pass data as attributes on the child component tag.
• Child usage: Use props in template or script as normal variables.

vue

<script setup>
// ChildComponent.vue
const props = defineProps(['title', 'count'])
</script>
<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Example

This example shows a parent component passing a message prop to a child component, which displays it.

vue

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
  message: String
})
</script>
<template>
  <p>Message: {{ message }}</p>
</template>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent message="Hello from parent!" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

Output

Message: Hello from parent!

Common Pitfalls

Common mistakes when using props include:

• Not declaring props in the child component, so Vue ignores passed attributes.
• Passing props without binding when the value is dynamic (use : or v-bind for variables).
• Mutating props inside the child component, which is not allowed and causes warnings.

Always treat props as read-only inside the child.

vue

<!-- Wrong: Passing dynamic prop without binding -->
<ChildComponent message="parentMessage" />

<!-- Right: Bind dynamic prop -->
<ChildComponent :message="parentMessage" />

<!-- Wrong: Mutating prop inside child -->
<script setup>
const props = defineProps(['count'])
// props.count = 5 // ❌ Not allowed
</script>

<!-- Right: Use local copy to mutate -->
<script setup>
import { ref } from 'vue'
const props = defineProps(['count'])
const localCount = ref(props.count)
localCount.value = 5 // ✅ Allowed
</script>

Quick Reference

Concept	Description	Example
Declare props	Use defineProps or props option in child	const props = defineProps(['title'])
Pass props	Use attribute with binding in parent	<Child :title="parentTitle" />
Access props	Use props directly in template or script	{{ title }} or props.title
Props are read-only	Do not change props inside child	Use local state to modify data
Prop types	Declare expected types for validation	defineProps({ count: Number })

Key Takeaways

Declare props in the child component to receive data from the parent.

Pass props using attribute binding with : for dynamic values.

Props are read-only inside the child; do not mutate them directly.

Use defineProps in script setup for clean and modern syntax.

Always specify prop types for better validation and clarity.