Custom Events in Vue.js

Shorthand for v-on

To simplify our templates, we can use the v-on shorthand, @.

 

<button @click="hello">Hello !!!</button>

 

The v-on directive makes handling DOM events in Vue easy. We may need to handle more intricate events when building our custom components.

Creating Custom Events in Vue.js

Using the $emit method, we can build a custom event from our Vue components. Here's a button that sends out an item-chosen event with the value food basket.

 

<button @click="$emit('item-chosen', 'food basket')">
  Choose Food Basket
</button>

 

We can pass an object as the second parameter for more sophisticated circumstances. This is useful if we provide more information to our parent components, such as a user object.

 

<button @click="$emit('user-chosen', { name: 'Ash', username: 'Ashcode' })">
  Choose User
</button>

How Vue Handles Events?

Before we go any further, it's important to understand Vue's approach to components and custom events.
 

We can construct Custom Events in Vue.js that come from our components in the same way we can "listen" for when an element emits an event. We can, for illustration, have an HTML button that fires a click event. We can also use a custom component called <LanguagePicker /> to send a language-chosen event:

 

<!-- Listening on a button for a click event -->
<button @click="doSomething">Click Me</button>

<!-- Listening on a color-picker for a custom event called language-chosen 
<LanguagePicker @language-chosen="updateLanguage" />

Creating Custom Vue Events

Let's build on our previous <LanguagePicker /> example. In this example, the selected language is displayed according to the user's choice. The three languages available are:-

• Java
• Python
• JavaScript

 

By default, it will show Java. 
 

Let's begin by putting together our primary App.vue component.

App.vue

<template>
 <div>
   <LanguagePicker @language-chosen="updateLanguage" />
   <h1>{{language}}</h1>
 </div>
</template>

<script>
import LanguagePicker from "./LanguagePicker";

export default {
 components: { LanguagePicker },
 data() {
   return {
     language: "Java"
   };
 },
 methods: {
   updateLanguage(language) {
     this.language = language;
   }
 }
};
</script>

<style>
 h1 {
   text-align: center;
 }
</style>

 

We've established a main <div> in our main App component. We've also introduced a updateLanguage method to listen for that language-chosen event in this component. Because we haven't defined our <LanguagePicker /> component, this Vue application now accomplishes nothing and will likely give an error. Let's do that in LanguagePicker.vue right now.

 

LanguagePicker.vue

<template>
 <div id="buttons">
   <button @click="chooseLanguage('Java')">Java</button>
   <button @click="chooseLanguage('Python')">Python</button>
   <button @click="chooseLanguage('JavaScript')">JavaScript</but
We've introduced a updateLanguage method to listen for that language-chosen event in this component.ton>
 </div>
</template>

<script>
export default {
 methods: {
   chooseLanguage(language) {
     this.$emit("language-chosen", language);
   }
 }
};
</script>

<style>
 #buttons {
   display: flex;
   justify-content: space-between;
 }
</style>

 

This component will then emit a custom event. This event is known as language-chosen. 

 

Our component has now started generating events! Now our parent component can listen for this event. Let’s see how this works!!!

 

Output

Naming conventions for Vue custom events

Vue does not immediately transform event names. The names of emitted events must match the names of events being listened to.
 

If a component produces the MyEvent event, for example:

this.$emit('MyEvent')

 

Then, in the parent component, we must listen to MyEvent:

<child v-on:MyEvent="doSomething"></child>

 

There's no reason to use camelCase or PascalCase because event names will never be used as variable or property names in JavaScript. Because HTML is case insensitive, v-on will automatically convert everything to lowercase.
 

As a result, v-on:MyEvent will be renamed to v-on:myevent. Hence, using kebab-case for event names is a smart idea.

FAQs

1. What are custom events in Vue?

Vue.js allows us to listen for custom events, which is very handy for allowing child components to fire off events that parent components can listen for.

 

2. What is the naming convention for Vue custom events?

Because event names will never be used as variable or property names in JavaScript, there's no requirement to use camelCase or PascalCase. Because HTML is case-insensitive, v-on will convert everything to lowercase automatically.

As a result, it's a good idea to use kebab-case for event names.

 

3. How to fire a custom event in Vue.js and then how to listen to that event?

To fire a custom event, the following syntax is used:

this.$emit('eventName')

 

To listen to this customevent, the following syntax is used:

<myComponent @eventName="doSomething"></myComponent>

Key Takeaways

Custom events in Vue.js are very handy for allowing child components to send out events that parent components can listen to. Our components will become more adaptable and reusable due to vue events. We can transfer data out of a component and up to a parent component by using $emit. The parent component can then use that information in whatever way it deems fit. This paradigm allows us to design separate components for the rest of our app, which is useful for developing large applications.
 

Don't stop here. If you liked this blog about custom events in Vue.js, check out our Learn Vue free course to learn Vue from scratch. Also, feel free to check out the blog Vue JS Vs React in 2021.