Vue Component Custom Event

Posted on  by admin

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. 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.

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. Page.vue — this is just the parent container for this example.

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. 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. 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 . Then in the parent, we listen. However, there is a shorthand that the brilliant Vue team added to simplify this command into one line.

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. 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. 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 [email protected] Happy programming! If you’re interested in learning more about VueJS, click here to get a free Vue cheatsheet of essential knowledge that every Vue developer needs to know. We know that Vue can listen to events on your elements and trigger specific functions to run when such events occur.

Vue.js also allows you to listen for custom events, an ability which has its most important use case in allowing child components to fire off events that parent components can listen for. We created a simple photo gallery component in the Vue Template Syntax article. You could click any of the photos in a row of thumbnails and the photo you clicked would be displayed in a large size below.

Now, what if we wanted the background of the entire page to be set to the average color of the photo being displayed? We could call this something like theater mode. The power of custom events is that we can fairly easily do that. The parent component of the photo gallery, App.vue, simply needs to receive the average RGB value of the photo from its child component, PhotoGallery.vue, when the photo is clicked. Let’s get started. This tutorial picks up where the Template Syntax tutorial left off. Let’s use the same setup from this previous post.

We’re going to use an npm library called fast-average-color to get the average color value for a particular photo.

Import it at the top of the