In this article, I will explain everything you need to know about props and why you should use props in Vue.js. Here's a brief outline of what we'll cover in this guide:. What are props in Vue.js?
How to register props inside a component. How to work with multiple props. Vue.js prop types. How to pass data to props. How to pass functions to props. How to validate props.
How to set default values for props. “Props” is a special keyword which stands for properties. It can be registered on a component to pass data from a parent component to one of its children components.
Data in props can only flow one way – from the top, or parent component, to the bottom, or child components. This simply means you cannot pass data from a child to a parent.
Another thing to keep in mind is that Props are read-only and cannot be modified by the child component because the parent component "owns" that value.
Let’s balance things up now – the parent components pass props to the child component(s) while the child component emit events to the parent component(s). Let's now take a look at how we can register props inside a component. or, in a Vue Single File Component:. In the above code, we registered a prop called name which we can call in the template section of our app.