Emitting Component Custom Events — VueJS Tutorial

Matt Maribojoc
Nov 4 · 4 min read
Photo by Fatos Bytyqi on Unsplash

An important part of any Vue application is to take full advantage of Vue’s reactivity to pass data around an app. However, sometimes this may sometimes get a little confusing when it comes to handling multiple components, inheritance, and a bunch of other problems that always come up in development.

Hopefully, this quick article covers all of the bases to get you well on your way to becoming a master of custom events in Vue.js.

Why Emit Events

You may be asking yourself, “When would I need to do this?”. I don’t blame you. It’s difficult going through tutorials when you don’t know how it’s relevant to your projects.

Emitting events is very useful when using Vue’s best practices and trying to create modular components. If you want your parent component to be able to receive data from its child, a great way to do this is by using VueJS custom events.

For example, let’s say you have a popup component whose visibility is controlled by the parent. If we want to close the popup by clicking an exit button, we can emit an event from the child to the parent to tell it to hide the popup.

There are way more complicated use cases in which this fundamental skill is important, but it once you get the basics it’s pretty easy to see how it can apply to your project.

How Do We Even Do This?

Going back to the earlier example of a popup component, let’s say we have the following two components.

Popup.vue — this could be a verification form, login popup, anything really

<template>
<div class='popup'>
This is the popup
<div>Close</div>
</div>
</template>
<script>
</script>

Page.vue — this is just the parent container for this example

<template>
<div>
<popup v-show='popupOpen'></popup>
Hello World
</div>
</template>
<script>
import Popup from '.Popup.vue'
export default {
components: {
Popup
},
data () {
popupOpen: false
}
}
</script>

As you can see, the popup is only visible on Page.vue when the popupOpen variable is true — however if we wanted to close the popup by clicking the button, it may get a little tricky to pass this information back to Page.vue this is where emitting custom events can come in.

All we have to do is add a few lines.

In Popup.vue — we have to add a method and call it when the button is clicked. The method will emit an event.

<template>
<div class='popup'>
This is the popup
<div @click='handleClick'>Close</div>
</div>
</template>
<script>
export default {
methods: {
handleClick: function () {
// can put fancier logic here, but we'll be simple
this.$emit('close')
}
}
}
</script>

Then, in Page.vue, we’ll have to listen for this event and handle it accordingly. This can be done by modifying the one line using the v-on modifier.

<popup v-show='popupOpen' v-on:close='popupOpen = false'></popup>

Getting a Little Fancy with It

Of course, this example is extremely simple and may even seem self explanatory. But there are way more advanced capabilities that can be done using VueJS custom events.

One common use for emitting VueJS events is to create a two way binding between properties. Thankfully, VueJS knows this and has created a shorthand for doing this.

Straight from the Vue docs. We have the following example in which we .

this.$emit('update:title', newTitle)

Then in the parent, we listen.

<text-document   
v-bind:title="doc.title"
v-on:update:title="doc.title = $event" >
</text-document>

However, there is a shorthand that the brilliant Vue team added to simplify this command into one line.

<text-document v-bind.sync="doc"></text-document>

This is a great example of passing data back to the parent component, by calling this.$emit() with a second parameter, it is passed back to the parent under the variable name $event. This is useful because you can pass back Objects or any other data that you want.

Further Reading

As always, I’m a huge fan of using the VueJS docs — it’s some of the best written documentation for any programming framework out there. It’s definitely my go to resource for finding out more specifics and the ins-and-outs of the code syntax and options.

That’s it.

And five quick bullet points later — that’s it! This should definitely be enough to get you started in using one of Vue’s lesser utilized features. I hope you found this helpful, and as always, if you have any questions, comments, concerns, or even just want to say hi — just leave a reply or shoot me an email at matt@trysitelift.com

Happy programming!

Matt Maribojoc

Written by

Web Developer and Designer | Student at the University of Pittsburgh

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade