Vue Props
Passing data from parent to child components
📬 What are Props?
Props (properties) allow parent components to pass data to child components. They enable communication between components, making your app dynamic and flexible. Props are read-only in child components, ensuring predictable data flow.
<!-- GreetingCard.vue (Child) -->
<template>
<div class="card">
<h2>Hello, {{ name }}!</h2>
<p>Age: {{ age }}</p>
</div>
</template>
<script setup>
defineProps({
name: String,
age: Number
})
</script>
<!-- App.vue (Parent) -->
<template>
<GreetingCard name="Alice" :age="25" />
</template>
Output:
Hello, Alice!
Age: 25
Props Features
One-Way Flow
Data flows from parent to child
<Child :data="parentData" />Read-Only
Child cannot modify props directly
// ❌ Don't do this
props.name = 'New Name'Type Validation
Ensure correct data types
defineProps({
age: Number
})Default Values
Set fallback values
default: 'Guest'🔹 Basic Props Example
Passing a simple string prop:
<!-- WelcomeMessage.vue -->
<template>
<div class="message">
<p>{{ message }}</p>
</div>
</template>
<script setup>
defineProps({
message: String
})
</script>
<!-- Parent Component -->
<template>
<WelcomeMessage message="Welcome to Vue Props!" />
</template>Output:
Welcome to Vue Props!
🔹 Multiple Props
Pass multiple props to a component:
<!-- UserProfile.vue -->
<template>
<div class="profile">
<h3>{{ username }}</h3>
<p>Email: {{ email }}</p>
<p>Role: {{ role }}</p>
</div>
</template>
<script setup>
defineProps({
username: String,
email: String,
role: String
})
</script>
<!-- Parent -->
<template>
<UserProfile
username="john_doe"
email="[email protected]"
role="Admin"
/>
</template>Output:
🔹 Dynamic Props with v-bind
Use : (v-bind) for dynamic values:
<!-- ProductCard.vue -->
<template>
<div class="product">
<h3>{{ title }}</h3>
<p>Price: ${{ price }}</p>
<p v-if="inStock">✅ In Stock</p>
<p v-else>❌ Out of Stock</p>
</div>
</template>
<script setup>
defineProps({
title: String,
price: Number,
inStock: Boolean
})
</script>
<!-- Parent -->
<template>
<ProductCard
title="Laptop"
:price="999"
:inStock="true"
/>
</template>Output:
Laptop
Price: $999
✅ In Stock
🔹 Props with Default Values
Provide fallback values for optional props:
<!-- Button.vue -->
<template>
<button :class="color">
{{ text }}
</button>
</template>
<script setup>
defineProps({
text: {
type: String,
default: 'Click Me'
},
color: {
type: String,
default: 'primary'
}
})
</script>
<!-- Usage -->
<template>
<Button />
<Button text="Submit" color="success" />
</template>Output:
🔹 Props Validation
Add validation rules to props:
<script setup>
defineProps({
// Basic type check
name: String,
// Multiple types
id: [String, Number],
// Required prop
email: {
type: String,
required: true
},
// With default and validator
age: {
type: Number,
default: 18,
validator: (value) => value >= 0
}
})
</script>