Structuring your web applications using a component architecture makes it easy to build and maintain your application.
Emitting custom events is one way you can handle communication between components; props and slots are two others. Custom events allow you to send data from the child to the parent component.
Emit Events From a Child to Its Parent
Vue offers a lot of options to communicate between components. One significant way ofcommunication between components is through props. Props allow you to send data from parent to child components.
What then happens if you want to send data from the child to the parent component? Vue allows you to emit custom events from child to parent components. This process enables the parent component to use data and functions from the child component.
For instance, imagine a button component with a function that returns a value upon every click. You will need to emit that event to the parent component to enable the parent component to update its state or perform an action based on the returned value.
Naming Convention for Custom Emitted Events in Vue
Before diving into how to emit custom events, you need to understand the naming convention for custom events in Vue. Before Vue 3 emerged, developers strictly had to define custom events withkebab-case, separating words in names with a hyphen character.
It’s now standard practice to define your custom events in kebab-case when working with HTML templates, andcamelCasewhen working with JavaScript. However, you can choose to use any option when working with JavaScript, as Vue compiles all custom events back to kebab-case.
When you emit a custom event, convey the event’s purpose with a descriptive name. This is very important, especially when you’re working in a team, to make the event’s purpose clear.
How to Emit Custom Events From Child to Parent Component
There are two ways you’re able to accomplish emitting custom events in Vue. You can emit custom events inline (directly in the Vue template) with the$emitmethod that Vue provides. You can also make use of thedefineEmitsmacro available from Vue 3.
Emitting Custom Events in Vue With the $emit Method
$emit, a built-in Vue method, allows a child component to send an event to its parent component. You call this method in-line (within the child component’s template) to trigger the custom event. The $emit method takes two arguments: the name of the event you want to emit and an optional payload that can carry additional data.
Consider this child component that emits an event to notify the parent component about a button click:
This code block shows how to emit a custom event from a child component. The child starts by initializing a post variable with an empty string.
The child component then binds the input element to the post variable with v-model, aVue data binding directive. This binding allows changes you make to the input field to update the post variable automatically.
The button element has a v-on directive that listens for click events on the button. The button click calls the $emit method with two arguments: the event name, “button-clicked”, and the value of the post variable.
The parent component can now listen for the custom event with the v-on directive forhandling events in Vue:
This code block demonstrates a parent component importing and using the child component from before. The parent component defines apostListarray variable as a reactive reference. The component then defines anaddPostsfunction that runs, taking apostargument. The function adds a new post to the postList array with thepush()method.
The@button-clickedevent listener captures the custom event theChildComponentemits when you click the button. This event causes the addPosts function to run. Finally, the code block attaches thev-fordirective forrendering lists in Vueto the ul element to iterate over the postList array.
Emitting Events With the defineEmits Macro
Vue 3 introduced thedefineEmitsmacro, which explicitly defines the events a component can emit. This macro provides a type-safe way to emit events leading to a more structured codebase.
Here’s an example of how you can use the defineEmits macro and call it in your child component:
While the functionality remains the same, there are significant differences in the code syntax between the above code block and the one with the$emitfunction.
In this code block, thedefineEmitsmacro defines thebutton-clickedevent. By calling this macro, the code block returns an $emit function, allowing you to emit the defined events. The array passed to the defineEmits macro within the component will contain all the events you need to emit to the parent component.
Next, the code block defines abuttonClickfunction. This function emits the button-clicked event and the post variable to the parent component. The template block of the child component houses a button element.
The button element has av-on:clickdirective triggering the buttonClick function. The parent component can then use the child component in the same way as it did with the $emit method.
Vue Developers Benefit From a Component-Based Architecture
You can communicate from a child component to its parent by emitting events using the $emit method and the defineEmits macro.
You can benefit from Vue’s component-based architecture as it allows you to write more structured, concise code. With modern JavaScript frameworks like Vue, you can use Web Components, a W3C web standard, to achieve this component-based architecture.
