Communicate with Events
Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events. Use events to communicate up the component containment hierarchy. For example, a child component, c-todo-item, dispatches an event to tell its parent, c-todo-app, that a user selected it.
Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser.
The DOM events system is a programming design pattern that includes these elements.
- An event name, called a type
- A configuration to initialize the event
- A JavaScript object that emits the event
To create events, we strongly recommend using the CustomEvent interface. In Lightning web components, CustomEvent provides a more consistent experience across browsers. It requires no setup or boilerplate, and it allows you to pass any kind of data via the detail property, which makes it flexible.
Lightning web components implement the EventTarget interface, which allows them to dispatch events, listen for events, and handle events.
To communicate down the component containment hierarchy, pass properties to the child via HTML attributes, or call its public methods. To communicate between components, use Lightning message service or a publish-subcribe utility.
See Also
- Send Events to an Enclosing Aura Component
- Salesforce Developers Blog: How Events Bubble in Lightning Web Components