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.
This code is from the
auraDomEventListener components in the lwc-recipes repo.
The following example illustrates this technique. This Lightning web component fires a custom
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
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.