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).
This article focuses in detail on Vue $emit, click here for a broader guide on handling Vue events.
Each Vue $emit call can pass two arguments:. 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 are a bunch of different ways to use Vue $emit in your code, the three that I’ll be covering in this article are….
Inline using $emit.
Pro Tips for emitting custom events
Options API – this.$emit. Composition API – context.emit. Each of them has its own pros/cons depending on your case, so let’s just check out an example in each and you can see which works for you.
An example of where you might want to send data out of a component is when building your own custom form input – let’s imagine a custom text input.
Use kebab-case when listening to events
Since, we’re wrapping our text input, when we implement MyInput.vue, we won’t be able to listen to the standard input events like @change.
Let’s say that our parent component is set up like this, listening for a custom custom-change event and logging its value. To achieve this, we need our custom text input to listen for the native input events, and then emit its own event.
To actually pass the value of our original change event, we need to send our custom event with the event payload – in this case, the event.target.value – as a second parameter.
Defining your custom events using emits
Now if we type in our custom input, our parent component will be properly logging all of our changes.
Migrate a component
Now, let’s move on to emitting events from our script section.
Like almost everything in Vue 3, we have the choice of using the Options API or the Composition API to emit custom events from our component. In the Options API, the $emit method can be called using this.
So in our same MyInput example, let’s say that instead of calling $emit in our template, we call a Vue method first instead. Then, inside our method, we can call this.$emit and same as last time, pass it our event.target.value.
In the Composition API, since setup runs before our component is created, we have no access to this. Instead, we can access our emit method by using the second argument of our setup function – context.
context has access to your components slots, attributes, and most importantly for us, its emit method.
Emitting Events in the Options API with this.$emit
Once we have access to emit whether we:. make setup take the whole context object OR. get only emit by destructuring context.
Closed by default and defineExpose
We can just call emit the same exact as the Options API: create a method, call emit, and pass it our arguments!
And there you have it!
You now know THREE different ways to emit custom events in Vue.
In Vue 3, we can actually define custom events for a component using the emits option in our export default.
This is important for keeping good documentation and knowing exactly what each component does.
Also, defining events in emit makes component events take priority over the native events.For example, if we define an event called change, we can override the default action.
The Official Vue docs recommend using kebab-case for your event names, even in your script.
This is essential if you’re using Vue 2. In Vue 2, event names do not have automatic camelCase to kebab-case conversion and the v-on directive automatically converts your event names to lower case so camelCase named events impossible to listen to.
For example, if we emitted an event called myEvent, listening for my-event would not work.
In Vue 3, event names – like props and components – can automatically be converted between the different cases.
Similar to props, it is still best to stick to each programming language’s conventions and use camelCase in your script and kebab-case in your template.
The ability to emit custom events in Vue is one of the most important techniques to understand before working on larger Vue projects.
By having this direct line of communication between a child and its parent component, we can do things like:.
Override native events. Build wrappers for event heavy elements (like inputs).
It's this easy to make an async setup()
Pass data everywhere in our application. I hope this overview of Vue $emit helped explain the different ways to use this powerful feature in all sorts of Vue apps.
Modified1 month ago.