Vue.js 2 Component Props
Props are used to pass down state to child components. Learn all about them
- Define a prop inside the component
- Accept multiple props
- Set the prop type
- Set a prop to be mandatory
- Set the default value of a prop
- Passing props to the component
Define a prop inside the component
Props are the way components can accept data from components that include them (parent components).
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>
Accept multiple props
You can have multiple props by appending them to the array:
Vue.component('user-name', {
props: ['firstName', 'lastName'],
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
Set the prop type
You can specify the type of a prop 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]
}
Set a prop to be mandatory
You can require a prop to be mandatory:
props: {
firstName: {
type: String,
required: true
}
}
Set the default value of a prop
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"
}
}
}
Passing props to the component
You pass a prop to a component using the syntax
<ComponentName color="white" />
if what you pass is a static value.
If it’s a data property, you use
<template>
<ComponentName :color=color />
</template>
<script>
...
export default {
//...
data: function() {
return {
color: 'white'
}
},
//...
}
</script>
You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:
<template>
<ComponentName :colored="color == 'white' ? true : false" />
</template>
<script>
...
export default {
//...
data: function() {
return {
color: 'white'
}
},
//...
}
</script>
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025