Lightning Web Components were first introduced in 2019 as an upgrade to Aura Components. Since then, it has been made clear that going forward, Aura Components are on their way out and Lightning Web Components are the future of Salesforce customization.
In this article, we’ll cover how you can use Lightning Web Components with Events, including some sample code you can use to create your own.
What Are Lightning Web Components?
How to Use Events in a Lightning Web Component
From here on, we’ll look closely at DOM Events and how they interact with LWCs. Events in Lightning Web Components are built on DOM Events and dispatch standard DOM Events (a collection of APIs and Objects which are available in-browser).
What Is a DOM Event?
How Does It Work?
In Lightning Web Components, we can create and dispatch custom events. Events are utilized to communicate up the component containment hierarchy. EventTarget Interface is implemented in LWC to dispatch, listen to, and handle events.
The elements involved in the DOM Events System are:
- An Event Name, known as Type.
- Configuration in order to initialize an event.
Let’s have a look at three different ways to communicate between Lightning Web Components using Events.
1. Parent-to-Child Communication
To pass the details from a parent-to-child component, public methods or public properties can be used. An API Decorator should be used to expose the child component properties/methods available to the parent component.
Below is the code snippet that shows how parent-to-child communication works in Lightning Web Components.
Note: sampleParent is the parent component and sampleChild is the child component. A Message attribute is set from parent to child component.
2. Child-to-Parent Communication
Custom Event can be used to communicate from child component to parent component.
CustomEvent() constructor can be used to create a custom event. Custom Event Name and properties should be passed into the constructor. The dispatchEvent() method is used to dispatch an event, and the code looks like this:
this.dispatchEvent(newcustomEvent(eventName, props); EventTarget.dispatchEvent()
To handle an Event declaratively with a HTML markup, add “on” as a prefix keyword for the event name in the parent component when calling the child component for the declarative event listener.
Below is the code snippet that shows how child-to-parent communication works in Lightning Web Components.
Note: parentCmp is the parent component and childCmp is the child component. A custom event is dispatched from the child component to parent component.
3. Communication Between Unrelated Components
Communication between components which aren’t in the same DOM tree (unrelated components) can be achieved by using the publish-subscribe model. Essentially, one component subscribes to an event, whereas another component publishes the event and handles it in the same scope.
Hopefully this article has helped you understand how to communicate between Lightning Web Components using Events, as well as the different ways available for communication across parent-child, child-parent, or unrelated Lightning Web Components. If we’ve missed anything, let us know in the comments.