Today, we will learn about props in component, like which different types we can use for the props in 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:
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
props: ['name']
}
</script>
- The valid types you can use are:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
- When a type mismatches, Vue.js 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: 'Bhagvat'
}
}
- For objects:
props: {
name: {
type: Object,
default: {
firstName: 'Bhagvat',
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 === 'Bhagvat'
}
}
}
Passing props to the component
- If it’s a data property, you use:
<template>
<ComponentName :color=color />
</template>
<script>
...
export default {
//...
data: function() {
return {
color: 'white'
}
},
//...
}
</script>
