One of the limitations of working with components inside an SPA is that you can’t directly pass data from one component to another. The idea behind component – based apps is that each component is encapsulated and has all the data it needs in order to work; but sometimes, we do need an avenue for communication between different components.
This is where Vue.js props come in – they allow you to pass any kind of data from a parent to a child component. Similar to how props work on React, this can be done by setting the prop attribute on the child component, and passing in the desired data from the parent. The process is actually very straightforward, but it can still be a bit confusing if you’ve never worked with Vue.js before.
In this article, we’ll take a look at how to use props in Vue.js, and some of the benefits that come with using them. Let’s get started!
What are props in Vue.js?
Props are attributes that you can set on a child component, in order to pass data in a top – to – bottom way. Inside a Vue project, props are one-way: they only send data from parent to child. This means that the parent component is responsible for setting the props, and the child component is only responsible for receiving them.
Props are also reactive: when the parent component updates a prop, it will automatically update on the child component as well. This can be very useful, as it means that you don’t have to worry about keeping the two components in sync – they’ll always be updated automatically.
So why would you want to use props?
If you’ve already worked with any other component – based framework like Angular or React, you probably already understand the need for parent – to -child communication. However, in case you’re not that familiar with this concept, there are a few reasons why you’d want to use props in Vue.js:
- Props allow you to keep your components modular and re-usable.
- They make it easy to share data between different parts of your application.
- In Vue.js, props are a simple way of passing reactive data from a parent component to a child, effectively syncronizing them.
How to use props in Vue.js?
Have we convinced you of the need for props? Let’s start using them! In this first example, we’ll take a look at how to set up props using the traditional Options API, which is what’s still being used in most production projects. Later in the article, we’ll see how to complete this same process with the new and shiny Composition API.
Using props in Vue.js is actually very simple: all you need to do is set the prop attribute on the child component, and pass in the data that you want to be received as a string.
For example, let’s say that we have a parent component called App which renders a child component called Child. We want to pass a message from App to Child, so that Child can display it. In order to do this, we would first set the “message” prop on Child, and then we can output it in our HTML by using our handlebars syntax:
<!-- This is our child component -->
<script>
export default {
props: ['message']
}
</script>
<template>
<p>This is my message: {{message}}</p>
</template>And then we’d add the actual prop in the App component, using our v-bind property. As a shorthand, we can just use the “:” notation:
<!-- This is our parent component -->
<template>
<ChildComponent :message="message" />
</template>
<script>
export default {
data() {
return {
message: "Hello World"
}
}
}
</script>This would directly communicate the message from App to Child, effectively outputting the following text:
This is my message: Hello WorldThe process is very similar if we want to pass multiple props: we just need to set them up as an array in the child component, like so:
<!-- This is our child component -->
<script>
export default {
props: ['message', 'name']
}
</script>
<template>
<p>{{message}}, {{name}}</p>
</template><!-- This is our parent component -->
<template>
<ChildComponent :message="message" :name="name" />
</template>
<script>
export default {
data() {
return {
message: "Welcome",
name: "Alex"
}
}
}
</script>Which would output the following result:
Welcome, AlexAnd that’s all there is to it! Setting props using the Options API is very simple and straightforward.
Using props in Vue with the Composition API
Let’s now see how this same process would look with the Composition API. As you will quickly notice, the HTML side of things is exactly the same one; we just need to rewrite our JS code in order to adapt to the new way of doing things inside a Composition – based project.
Therefore, our child component would end up looking like this:
<!-- This is our child component -->
<script setup>
defineProps(['message', 'name'])
</script>
<template>
<p>{{message}}, {{name}}</p>
</template><!-- This is our parent component -->
<template>
<ChildComponent :message="message" :name="name" />
</template>
<script setup>
import { ref } from "vue";
const message = ref("Welcome");
const name = ref("Alex");
</script>Final thoughts on using props in a Vue.js project
As you can see, props are a very simple yet powerful way of sharing data between different parts of your Vue.js application. If you’re still not convinced of their usefulness, we encourage you to take some time and experiment with them on your own.
We hope that this article has helped you understand how props work in Vue.js. If you have any questions, let us know in the comments below!
💬 Leave a comment