Passing data between components is one of the basics of working with Vue; and of all front end development, for that matter. However, when you’re starting out with a framework, it might get confusing trying to figure out just how to do that.
When you’re working with Vue, there are a few different ways to share data between components. Depending on the relationship between them, you might have to use several different tools; the most basic ones being props and events.
In this blog post, we’ll be looking at how to use props and events in the Vue.js framework. We’ll learn how to pass data from parent to child in Vue and vice versa. By the end of this post, you should have a good understanding of how data sharing between components works with Vue.
Are you passing data from parent to child? Props are the tool you need
Passing data from a parent component to a child one is a very common scenario. For example, let’s say you’re building a task management app; and you have a Dashboard.vue component that handles all the data.
Inside of it, you want to render a list of tasks with a particular design, and you decide to create a TaskItem.vue component that you’ll use for that purpose. How do you pass the data from Dashboard.vue to TaskItem.vue?
In Vue, props are used to pass data from parent components to child components. This is similar to the way that attributes are used in HTML elements. For example, we can create a component with a prop called message like this:
<template>
<div>{{ task}}</div>
</template>
<script>
export default {
name: 'TaskItem',
props: {
task: String, // Required prop
}
}
</script>We can then use this component in our parent component like this:
<template>
<TaskItem v-for="task in tasks" v-bind:task="task" />
</template>
<script>
import TaskItem from './TaskItem.vue'
export default {
components: { TaskItem },
data () {
return {
tasks: [
"Task 1",
"Task 2",
"Task 3"
]
}
}
}
</script>This will render three Task Items, each one with a different message. Notice how we’re using the v-bind property to pass our props dinamically so each iteration of TaskItem.vue is dynamic too.
So far so good! Now let’s look at how we can pass data from our child component back up to the parent using events.
Passing data from child to parent: using events
Events in Vue are emitted by the Event Bus instance on the Vue object (this.$root), which can be accessed by any component in your app. To listen for an event, you need to use the v-on directive like this on the parent component:
<template>
<div id="app">
<ChildComponent v-on:customEvent="handleEvent" />
</div>
</template>The handleEvent method in our script will be called whenever the customEvent event is emitted by our ChildComponent.
Let’s take a look at a complete example. In this case, we’ll create a CreateTask.vue child component, which will get some input from the user and then send it inside an event to our parent component:
<template>
<input type="text" v-model="task" />
<button @click="createTask">Create task</button>
</template>
<script>
export default {
name: "CreateTask",
data() {
return {
task: "",
};
},
methods: {
createTask() {
this.$emit("taskCreated", this.task);
},
},
};
</script>And then, in our parent component, we can add the following code in order to listen to our event and add this new task to our Tasks array:
<template>
<CreateTask @taskCreated="addTask" />
<TaskItem v-for="task in tasks" v-bind:task="task" />
</template>
<script>
import TaskItem from "./TaskItem.vue";
export default {
components: { TaskItem },
data() {
return {
tasks: ["Task 1", "Task 2", "Task 3"],
};
},
methods: {
addTask(e) {
this.tasks.push(e);
},
},
};
</script>Props and events are an essential part of working with components in Vue. In this blog post, we’ve learned how to pass data from parent to child components using props, and how to pass data back up from child to parent components using events emitted on the Vue instance ($root). By understanding how these two mechanisms work, you’ll be well on your way to building complex applications with Vue!
💬 Leave a comment