Vue Props

📦 Vue Props

In Vue.js, props (properties) are used to pass data from a parent component to a child component.

They are the main way components communicate downward.

 What are Props?

Props are custom attributes that you register on a component so it can receive data from its parent.

👉 Data flow:

Parent → Child (via props)

✔ Read-only
✔ Reactive
✔ Reusable

 Basic Props Example

🧩 Parent Component

<template>
<UserCard name="Sanjit" />
</template>

🧩 Child Component


 

📌 The child receives name from the parent.

 Dynamic Props (v-bind)

Use v-bind (:) to pass dynamic values.

<UserCard :age="userAge" />
data() {
return {
userAge: 25
}
}

 Multiple Props

<ProductCard
title="Laptop"
:price="45000"
:inStock="true"
/>
props: ['title', 'price', 'inStock']

 Props with Types (Recommended ✅)

props: {
name: String,
age: Number,
isAdmin: Boolean
}

✔ Helps catch bugs
✔ Better readability

 Props with Validation

props: {
age: {
type: Number,
required: true
},
role: {
type: String,
default: "user"
}
}

 Passing Objects & Arrays

<UserProfile :user="userData" />
props: {
user: Object
}

📌 Props are reactive — changes in parent update child.

 Props are Read-Only ❌

❌ Wrong:

this.name = "New Name"

✔ Correct:

  • Emit event to parent

  • Use local copy

data() {
return {
localName: this.name
}
}

 Props Naming Rules

JavaScript

props: ['userName']

Template

<user-card user-name="Sanjit" />

✔ camelCase → kebab-case

 Boolean Props

<MyButton disabled />
props: {
disabled: Boolean
}

✔ true automatically

 Props vs Data (Important ⚠️)

Feature Props Data
Owner Parent Component
Mutability Read-only Mutable
Purpose Configuration State

 Common Mistakes ❌

❌ Mutating props directly
❌ Not validating props
❌ Using props instead of state
❌ Passing too many props

 Best Practices ✅

✔ Validate props
✔ Keep props simple
✔ Use emits for updates
✔ Prefer objects for grouped data
✔ Document props clearly

 Summary Table

Task Use
Pass data Props
Update parent Emits
Local state Data
Validate input Prop validation

🏁 Conclusion

Vue props are the foundation of component communication and reusability.
Mastering props helps you build clean, scalable, and maintainable Vue apps.

You may also like...