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.

Tip

The following example illustrates this technique. This Lightning web component fires a custom filterchange event in its JavaScript file.

// categoryFilter.js import { LightningElement } from "lwc"; export default class CategoryFilter extends LightningElement { handleCheckboxChange() { // Get the labels of selected checkboxes const filters = Array.from(this.template.querySelectorAll("lightning-input")) .filter((element) => element.checked) .map((element) => element.label); const filterChangeEvent = new CustomEvent("filterchange", { detail: { filters }, }); // Fire the custom event this.dispatchEvent(filterChangeEvent); } }
<!-- categoryFilter.html --> <template> <lightning-input label="Category 1" type="checkbox" onchange={handleCheckboxChange} ></lightning-input> <lightning-input label="Category 2" type="checkbox" onchange={handleCheckboxChange} ></lightning-input> </template>

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.

<!-- auraDomEventListener.cmp --> <aura:component implements="flexipage:availableForAllPageTypes"> <aura:attribute name="message" type="String" default="No selection"/> <lightning:card title="AuraDomEventListener" iconName="custom:custom30"> <aura:set attribute="actions"> <span class="aura">Aura Component</span> </aura:set> <div class="slds-m-around_medium"> <lightning:layout> <lightning:layoutItem size="4"> <!-- This is an LWC component --> <c:categoryFilter onfilterchange="{!c.handleFilterChange}"/> </lightning:layoutItem> <lightning:layoutItem size="8" class="slds-p-left_medium"> {!v.message} </lightning:layoutItem> </lightning:layout> </div> </lightning:card> </aura:component>

You can only specify an onfilterchange handler in the first Aura component that the DOM event bubbles to.

Note

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.

// auraDomEventListenerController.js ({ handleFilterChange: function (component, event) { var filters = event.getParam("filters"); component.set( "v.message", filters.length > 0 ? "Your selection: " + filters.join() : "No selection", ); }, });

See Also

The Summer '25 guide is now live

Looking for the Component Reference? Go to https://developer.salesforce.com/docs/component-library/.