Send Events to an Enclosing Aura Component
To communicate from child to parent, dispatch an event. Lightning web components fire DOM events. An enclosing Aura component can listen for these events, just like an enclosing Lightning web component can. The enclosing Aura component can capture the event and handle it. Optionally, the Aura component can fire an Aura event to communicate with other Aura components or with the app container.
The auraEmbeddedLWC component in the lwc-recipes repo shows how to embed a Lightning web component in a parent Aura component and communicate with events.
The following example illustrates this technique. This Lightning web component fires a custom filterchange event in its JavaScript file.
The enclosing Aura component wrapper adds a handler for the custom event. Notice that the event handler, onfilterchange, matches the event name with “on” prefixed to it. That is, use onfilterchange to handle the event named filterchange.
You can only specify an onfilterchange handler in the first Aura component that the DOM event bubbles to.
The Aura component’s controller receives the event. You can handle the event however you’d like. This component operates on the filters array passed in the details property of the Lightning web component event. You can optionally fire a new Aura event to communicate with other Aura components.
See Also