How to define custom events in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

Today, I am going to show to you How do you define custom events with Vue built-in ‘emit()’ function in VueJS.

Vue $emit lets us emit, or send, custom events from a child component to its parent. In a standard Vue flow, this is the best way to trigger certain events (like closing a popup, for example) or to send data from a child component (like making a custom input).

Table of content

• Setup the Vue (Optional)
• How does the Vue Emit work?
• Define the $emit event in child components
• Trigger the Event in Parent Components

This article guides us to How do I define the $emit function to trigger the event in the parent component in VueJS.

Step 1: Setup the Vue (Optional)

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation. How to Setup the VueJS project?

Step 2: How does the Vue Emit work?

Vue $emit() function call can pass with two parameters.

• The event name – this is the name that we can listen to in our parent component
• A payload object – data that we want to pass with the event; this is optional

Here’s an example of a typical emit using both parameters $emit('event-name, data).

There is a different way to use Vue $emit.

• Inline using $emit
• Options API – this.$emit
• Composition API – context.emit

Step 3: Define the $emit() in child components

First I’m going to set an on-click event for the the syntex is @click and your function name.In Below code @click="childMethod". ‘childMethod’ is name method. we can access the $emit() function in component using this keyword for example this.$emit(). $emit() sends an event up the component tree. In emitting () the first parameter is the method and the other one data

Now, let us see an example of the $emit function.

ChildComponent.vue

<template>
    <div>
        <button @click="childMethod">Click</button>
    </div>
</template>

<script>
export default{
    name:'ChildComponent',
    data(){
        return{
            msg:'Welcome to sortoutcode.'
        }
    },
    method:{
        childMethod(){
            this.$emit('get-welcome-message',this.msg);
        }
        
    }
}
</script>

Step 4: Trigger the Event in Parent Components

In the Parent Components, First I have to import the Child Components in the script and also export the Child Components. After that, I am using the ‘ChildComponent’ in the template.

Parent Component setup like this, listening for a custom get-welcome-message event and logging its value. And trigger the showMessage events in Parent Components.

ParentComponent.vue

<template>
  <ChildComponent @get-welcome-message="showMessage"></ChildComponent>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
  name: "ParentComponent",
  components: {
    ChildComponent: ChildComponent,
  },
  methods: {
    showMessage(value) {
      console.log(value);
      console.log(`*-------------*`);
    },
  },
};
</script>

For now, let’s check the output.

Output

All the best 👍.