Learn how to use Vuejs props to create components that are reusable, modular, and easier to maintain. Find out the best practices for working with props and discover tips for passing data down to the components with props. To make the Vue component accept props we need to declare the props option in the component which can be done by passing an array with multiple props or by an object.
Register Vuejs props by an array
Props can be declared with an array with multiple props but the downside is that we cannot declare specific data type, default value, required, and so on within that array of props.
In the HelloComponent
<template>
<div>
<h3>{{ title }}</h3>
<p>{{ subTitle }}</p>
</div>
</template>
<script>
export default {
name: 'HelloComponent',
props: ['title', 'subTitle'],
};
</script>
Usage
Passing data to the component with props, you can pass the static value like the title prop and also with dynamic value like data property value with the “v-bind:” or “:” sign like a sub-title prop.
<template>
<div>
<HelloComponent title="title" :sub-title="subTitle" />
</div>
</template>
<script>
import HelloComponent from '@/components/HelloComponent.vue';
export default {
name: 'HelloWorld',
components: {
HelloComponent,
},
data() {
return {
subTitle: 'sub title',
};
},
};
</script>
Register Vuejs props by an object with prop properties
Props can also declare using the object syntax with the object syntax we can declare the props data type, required, and default value.
Vue accepts props type with one of the following:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
Props are optional by default, to make it a required prop specified with required: true.
The boolean type prop with no default value will have the default value of false unless changed by default: true.
All the other default values of other prop types with no default value specified will have the default value of undefined. The default value can be overwritten by specifying with default: value. If the prop is not passed or passed with an undefined value, the default value will be used instead if specified. Props with type object or array, such as date must use a function to return the default value. As the date is an object in Javascript.
dateProp: {
type: Date,
default() {
return new Date();
},
},
In the HelloComponent
<template>
<div>
<h3>{{ title }}</h3>
<p>{{ publishedDate }}</p>
</div>
</template>
<script>
export default {
name: 'HelloComponent',
props: {
title: {
type: String,
required: true,
},
publishedDate: {
type: Date,
},
},
};
</script>
Usage
<template>
<div>
<HelloComponent title="title" :published-date="publishedDate" />
</div>
</template>
<script>
import HelloComponent from '@/components/HelloComponent.vue';
export default {
name: 'HelloWorld',
components: {
HelloComponent,
},
data() {
return {
publishedDate: new Date('2023/12/01'),
};
},
};
</script>
Props validation
Props can be validated by specifying the validator in the prop as shown below. The “typeProp” below will only accept the value “typeA” or “typeB”, passing other values besides that will result in a console error.
In the HelloComponent
<template>
<div>
<h3>{{ typeProp }}</h3>
</div>
</template>
<script>
export default {
name: 'HelloComponent',
props: {
typeProp: {
validator(val) {
return ['typeA', 'typeB'].includes(val);
},
},
},
};
</script>
Props data flow
From https://vuejs.org/guide/components/props.html#one-way-data-flow, “All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around.” meaning that props are immutable prevent the child component from updating the parent state which helps prevent accidental mutate of the parent state from child component that leads to a messy data flow. But still, when an object and array are passed as props the child component can still mutate the nested property of props as Javascript only passed the reference for array and object. As a best practice, we should avoid mutating the props at all costs, emitting an event instead, and letting the parent component mutate its state.
export default {
props: ['foo'],
created() {
// ❌ warning, props are read-only!
this.foo = 'bar'
}
}
Conclusion
Learn how to use props in Vuejs and discover the tips to use props. Props are used to pass data down to the components from the parent component. Props are read-only, trying to mutate props will throw a console error, instead of mutating a prop, emit an event and let the parent component handle it.
