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!
Top comments (0)