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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Define a prop inside the component<\/strong><\/p>\n\n\n\n Props are the way components can accept data from components that include them (parent components).<\/p>\n\n\n\n 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. ParentCard.vue<\/strong><\/p>\n\n\n\nParent Component Uses Binding<\/h4>\n\n\n\n
Note that we are inside the parent component, but we are rendering a child component using it\u2019s 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: [\u2018parentmessage\u2019] as a prop. In our Parent we pass the data down using .<\/p>\n\n\n\n