Props are the easiest way of passing data from parent component to child component. In this post, we will look at Vue 3 Component Props with examples on how to use them.
If you are new to the concept of components, check out this guide on creating Vue 3 components.
1 – Vue 3 Component Props Declaration
In VueJS, we need to explicitly declare props. This makes Vue aware of what external props passed to the component should be made available within the component.
To declare props, we use the defineProps() macro. See below example where we create a new component GreetingMessage:
<script setup>
const props = defineProps(['msg'])
console.log(props.msg)
</script>Here, we pass the an array of strings to the defineProps() macro and msg is the name of the prop. Basically, the above piece of code will ensure that our component is ready to handle a prop with the name msg.
We can use the prop within the HTML template of our component as below.
<script setup>
const props = defineProps(['msg'])
console.log(props.msg)
</script>
<template>
<p>
Greeting msg: {{ msg }}
</p>
</template>Here, it is similar to using any other component variable using double curly braces.
Next, we have to pass the props while using the GreetingMessage component.
See below example from the App component where we insert the GreetingMessage component. While using the GreetingMessage component we specify the value for the msg prop.
<script setup>
import GreetingMessage from './GreetingMessage.vue'
</script>
<template>
<h1>Component Prop Demo</h1>
<GreetingMessage msg="I am a component Prop" />
</template>2 – Vue 3 Props Object Example
Instead of an array of strings, we can also use the object syntax to define the props.
Check out the below example:
<script setup>
const props = defineProps({
msg: String
})
console.log(props.msg)
</script>
<template>
<p>
Greeting msg: {{ msg }}
</p>
</template>Within the defineProps() macro, we use an object. For each property in the prop object declaration syntax, the key is the name of the prop and the value is the constructor of the expected data type. In our example, name of the prop is msg and the type is String.
The advantage of this declaration approach is that it documents our component in a better way. Other developers trying to use our component can understand what type of data it can accept. We can also enable VueJS prop validations using this approach.
The usage for the component declared using the object syntax is exactly the same as previous example.
<script setup>
import GreetingMessage from './GreetingMessage.vue'
</script>
<template>
<h1>Component Prop Demo</h1>
<GreetingMessage msg="I am a component Prop" />
</template>3 – VueJS Static vs Dynamic Props
In the above example, we are using static props. In other words, we are simply hard-coding the value of the msg while calling the component within the template.
However, many times we need to pass dynamic data to props. Think about a situation where we are fetching or computing some value in our parent component and sending it to the DOM. In such a case, we can use the v-bind directive.
See below example:
<script setup>
import GreetingMessage from './GreetingMessage.vue'
const greeting = "I am a component Prop";
</script>
<template>
<h1>Component Prop Demo</h1>
<GreetingMessage :msg="greeting" />
</template>Basically, we used the shorthand notation for v-bind using :msg.
4 – Vue 3 Component Props for Different Data Types
In the previous examples, we only passed string values as props. However, we can technically pass any type of data in a prop.
However, we have to use v-bind to tell Vue that we are passing an expression instead of a value. See below example:
<GreetingMessage :msg="35" /> //Number
<GreetingMessage :msg="false" /> //Boolean
<GreetingMessage :msg="[35,62,48]" /> //Array
<GreetingMessage :msg="{
text: "Hello", sender: "Adam"
}" /> //ObjectBasically, we are handling numeric, boolean, array and object data types using the v-bind notation. Of course, appropriate changes need to be done in the GreetingMessage component to handle the data types.
Also, we can validate VueJS Props for different data types.
Conclusion
Vue 3 Component Props is a must-have feature when we have to build any valuable application. Passing data from parent to child component is one of the most basic functionality that has to be performed.
Want to build something cool with VueJS? Check out this post on creating a carousel using VueJS.
If you have any comments or queries about this post, please feel free to mention them in the comments section below.
0 Comments