Props and Default Properties

Props

Of course, being able to create reusable segments of our UI is quite handy in itself, but to be really useful, we need to be able to pass information to our components—both data for them to display and options to configure how they behave.

Vue’s way of doing this is to allow our components to declare a set of props, which are essentially custom attributes. To declare the props that a component will accept, we can simply add a property called props whose value is an array containing the names of the props as strings.

In the case of our imaginary Avatar components, we’ll declare the src prop that’s passed in the following way: