How to broadcast communication events between components in Vue

Broadcasting custom events is one way you can handle communication between components. Here are detailed instructions on how to broadcast communication events between components in Vue .

How to broadcast communication events between components in Vue Picture 1

Broadcast an event from a child component to its parent

Vue offers a lot of options for communicating between components, most notably via props. Props allows you to send data from parent component to child.

What if you want to send data from child component to ca? Vue allows you to remove custom events from the child component to the parent. This process allows the parent component to use data and functions from the child component.

For example, imagine a button component containing a function that returns a value based on each click. You need to broadcast that event to the parent or root component to allow the parent component to update the state or take action based on the returned value.

Naming conventions for custom broadcast events in Vue

Before diving into how to broadcast custom events, you need to understand the naming conventions in Vue. Before Vue 3 came out, developers had to strictly define custom events with kebab-case , separating words in names with hyphen characters.

It is now standard practice to define your custom events in kebab-case when working with HTML templates and camelCase when 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 broadcasting a custom event, communicate the purpose of the event with a descriptive name. This is very important, especially when you are working in a team, to clarify the purpose of the event.

How to broadcast custom events from subdirectory to parent

You have 2 ways of accomplishing emitting custom events in Vue. You can stream custom events (directly within the Vue template) using the $emit method Vue provides. You can also use the macrodefineEmits available from Vue 3.

Fire 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 inline (in the child component's template) to trigger a 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 of a button click:

 Post 

This code block shows how to fire a custom event from a child component. The child component starts by initializing a variable post with an empty string.

The child component then binds the input element to the post variable using v-model, a Vue data binding directive. This link allows changes you make to the input field to automatically update the post.

The button element has a v-on directive that listens for click events on the button. Clicking the button 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 custom events using the v-on directive to handle events in Vue:

 import { ref } from "vue"; import ChildComponent from "./components/ChildComponent.vue"; const postList = ref([]) const addPosts = (post) => { postList.value.push(post) }

1. {{ post }}

This block of code illustrates a parent component importing and using the child component from before. The parent component defines the postList array variable as the react reference. This component then defines an addPosts function that runs, taking a post argument. The function adds a new post to the postList array using the push() method.

The @button-clicked event listener captures the custom event that the ChildComponent emits when you click the button. This event causes the addPosts function to run. Finally, the code block attaches the v-for directive to display the list in Vue with the ul element to iterate through the postList array .

Broadcast events with defineEmits . macro

Vue 3 introduced the defineEmits macro , which explicitly defines the events a component can emit. This macro provides a safe way to emit events resulting in a more structured codebase.

Here's an example of how you can use macrodefineEmits and call it in a child component:

 Post 

Although the functionality remains the same, there is a significant difference in the code syntax between the code block above and the block with the $emit function .

In this block of code, the macrodefineEmits defines the button click event. By calling that macro, the code block returns the $emit function , allowing you to emit the specified events. The array passed to the macrodefineEmits in the component will contain all the events you need to emit for the parent component.

Next, the code block defines the buttonClick function . This function emits the button clicked event and the post variable for the parent element. The child component's template block contains a button element.

The button element has a v-on:click directive that triggers the buttonClick function. The parent component can then use the child component in the same way it did with the $emit method .

Here's how to broadcast communication events between Vue components . Hope the article is useful to you.

Marvin Fry

Update 24 July 2023