Vue js Props
Definition
Props in Vue are the channels through which information flows from a parent component to its child. They act like custom attributes that you assign to child tags and define inside the component to receive values.
Usage Purpose
When you want to tailor a child component’s display or behavior based on data from its parent, you send that data via props. This ensures each component stays flexible and modular without duplicating logic.
Passing Props from Parent
In a parent template, you pass props by writing them as attributes on the child component:
<user-profile name="Alice" age="28"></user-profile>
Receiving Props in Child
To capture those values, the child component declares a props array or object:
props: ['name', 'age']
Alternatively, for validation and type checking:
props: {
name: String,
age: Number
}Dynamic Props with v-bind
Instead of hardcoding, you can bind variables using v-bind (or : shorthand):
<user-profile :name="userName" :age="userAge"></user-profile>
This updates automatically if the parent data changes.
One-Way Data Flow
Props are read-only in child components. They reflect a one-directional flow. If you need to modify them, create a local copy inside the child using data():
data() {
return {
localAge: this.age
};
}Default Values and Validation
Props can include default settings and custom rules:
props: {
score: {
type: Number,
default: 0,
required: true
}
}Boolean Props
Boolean values can be passed by simply adding the prop without a value:
<toggle-switch active></toggle-switch>
Inside the component:
props: {
active: Boolean
}Passing Objects or Arrays
You can transmit entire arrays or objects using v-bind:
<product-item :details="productData"></product-item>
In the child:
props: ['details']
Conclusion
Props streamline how parent and child components exchange information. They keep your UI adaptable and the logic uncluttered.
Prefer Learning by Watching?
Watch these YouTube tutorials to understand VUE JS Tutorial visually:
What You'll Learn:
- 📌 Learn Vue Props In 10 Minutes // Vue.js Tutorial on Props for Components // Pass Data Via Props
- 📌 Props and Emitters in Vue 3 (FULL TUTORIAL)