Vue.js Component Props

When a component expects one or more prop, it must define them in its props property:

Vue.component('user-name', { props: ['name'], template: '<p>Hi {{ name }}</p>' }) 

or, in a Vue Single File Component:

<template> <p>{{ name }}</p> </template> <script> export default { props: ['name'] } </script> 

You can have multiple props by simply appending them to the array:

Vue.component('user-name', { props: ['firstName', 'lastName'], template: '<p>Hi {{ firstName }} {{ lastName }}</p>' }) 

You can specify the type of a prop very simply by using an object instead of an array, using the name of the property as the key of each property, and the type as the value:

Vue.component('user-name', { props: { firstName: String, lastName: String }, template: '<p>Hi {{ firstName }} {{ lastName }}</p>' }) 

The valid types you can use are:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

When a type mismatches, Vue alerts (in development mode) in the console with a warning.

Prop types can be more articulated.

You can allow multiple different value types:

props: { firstName: [String, Number] } 

You can require a prop to be mandatory:

props: { firstName: { type: String, required: true } } 

You can specify a default value:

props: { firstName: { type: String, default: 'Unknown person' } } 

For objects:

props: { name: { type: Object, default: { firstName: 'Unknown', lastName: '' } } } 

default can also be a function that returns an appropriate value, rather than being the actual value.

You can even build a custom validator, which is cool for complex data:

props: { name: { validator: (name) => { return name === 'Flavio' //only allow "Flavios" } } } 

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 100+ pages ebook about the Vue fundamentals next week!