In simple terms, props are the acronym of properties.Props are very essential when we want to pass data from the parent components to other child components.Props always take the top to bottom approach.
That is props can only take the flow from parent to child components and not vice versa.Props can also be of various types such as strings, arrays, objects, numbers, Boolean, and even Functions.
Define a prop inside the component
Props are the way components can accept data from components that include them (parent components).
Parent Component Uses Binding
In order to pass the data down from the Parent Component to the Child Component, we can now visit the parent component and set up an attribute binding which uses the same name as the prop from the child component.
Note that we are inside the parent component, but we are rendering a child component using it’s custom tag of . It is on this tag where we set up the bound attribute. Now, since we are using parentmessage as the attribute name, then in the Child we will need props: [‘parentmessage’] as a prop. In our Parent we pass the data down using .
ParentCard.vue
ChildCard.vue
Child Component uses props Object
So in this snippet below we have a Child component which has a prop setup and a string value of parentmessage in it’s array.
What this indicates is that parentmessage can be set from the outside, or from the parent component. That is exactly what we are doing in the section above.
The string name given for the prop, in our case parentmessage must match the property name used in the template section of this component.
I’m Abhishek, a DevOps, SRE, DevSecOps, and Cloud expert with a passion for sharing knowledge and real-world experiences. I’ve had the opportunity to work with Cotocus and continue to contribute to multiple platforms where I share insights across different domains:
-
DevOps School – Tech blogs and tutorials
-
Holiday Landmark – Travel stories and guides
-
Stocks Mantra – Stock market strategies and tips
-
My Medic Plus – Health and fitness guidance
-
TrueReviewNow – Honest product reviews
-
Wizbrand – SEO and digital tools for businesses
I’m also exploring the fascinating world of Quantum Computing.
Best Cardiac Hospitals Near You
Discover top heart hospitals, cardiology centers & cardiac care services by city.
Advanced Heart Care • Trusted Hospitals • Expert Teams
View Best Hospitals