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.