In this tutorial, We’ll learn to emit data with vuejs custom events. It’s useful to send data from the child component to the parent component. Additionally, we’re using props for communicating parent-child components. It’ll be a great example of real-life parent-child and child-parent components communication.
Post Contents
# Prerequisites
I’m using Vue CLI for this tutorial. Before digging deeper into this tutorial, you must know vue js components. You can read the official documentation of vuejs custom events here. Together with vuejs knowledge, this tutorial uses props to communicate from parent component to child component. In that case, please learn the following tutorial first.
In the first place, we need two components to interact with. If you installed Vue CLI then you already have src > App.vue and src > views > Home.vue in your application. As a result, we’ll take App.vue as parent and Home.vue as a child component.
Next, you should add bootstrap CDN in public > index.html into the head section as shown:
/* public > index.html */
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head># Creating Custom Events
To create a custom event open Home.vue amend the following code. It has a button group and an increaseCounter onClick event. Button listing using props array assigned in App.vue. We are going to increase counter property according to props values.
Clicking on any buttons will call increaseCounter method. Inside that function, there is a function called $emit with two parameters. The first one is a custom event called increaseCounter. Keep in mind, event names are case-sensitive. You can use any names of the event with kebab-case or camelCase.
/* src > views > Home.vue */
<template>
<div class="Home">
<div class="btn-group" role="group">
<button v-for="step in steps" :key="step" type="button" class="btn btn-primary"
@click="increaseCounter(step)">+ {{ step }}
</button>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
props: ['steps'],
data() {
return {
counter: 0
}
},
methods: {
increaseCounter(value) {
this.counter += value;
this.$emit("increaseCounter", this.counter);
}
}
}
</script>In this case, increaseCounter event holds the counter property value. The parent component will receive that custom event with the same name. To receive custom event in App.vue please change that component as below.
/* src > App.vue */
<template>
<div id="app" class="container">
<h2>Counter: {{ counter }}</h2>
<home :steps="steps" @increaseCounter="increaseCounter"></home>
</div>
</template>
<script>
import Home from "@/views/Home";
export default {
name: "App",
components: {
Home
},
data() {
return {
counter: 0,
steps: [1,3,5]
}
},
methods: {
increaseCounter(counter) {
this.counter = counter;
}
}
}
</script>As a result, the parent component will wait for increaseCounter event. If it calls then it will call method increaseCounter into parent controller, and assign received value to the counter property. You can use as many vuejs custom events as you want.
That’s it for the vuejs custom events. Thank you for your support. Happy Coding!
Learn more about Vue JS
