Listen LWC Event From Aura Component

Question

For example:

In case record page -

I have Aura Component and LWC Component independently, user is updating case from LWC Component. We need to capture that event show the latest update in Lightning Component.

IN LWC -

const selectedEvent = new CustomEvent('caserecordchange', { 
                detail: {caserecord: caserecord}
            });
            this.dispatchEvent(selectedEvent);

In Aura Component - How to capture this ?

Answer 1

It's the event name with "on" prefixed.

<c:my-lwc-component oncaserecordchange="{!c.handleCaseRecordChange}" />

You can read more about it in the documentation.

For the moment, the Aura compiler doesn't know what events can be fired from LWC, so be sure not to have any typos, or your event will be missed.

The documentation doesn't mention a way to broadcast to Aura components, but once you fire up from LWC to Aura, you can fire an Application Event. This is mentioned in this Trailhead module:

You can optionally fire a new Aura event to communicate with other Aura components.

This appears to be the only path forward for now. If we get pubsub for Aura, then we'd be able to use that instead.

Answer 2

Disclaimer: I haven't used this feature yet.

Salesforce now has the Lightning Messaging Service as a beta feature for this use-case. Please go thru the following articles for details about how to use it:

https://developer.salesforce.com/blogs/2019/10/lightning-message-service-developer-preview.html

https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/lwc.use_message_channel

https://developer.salesforce.com/docs/component-library/bundle/lightning:messageChannel/documentation

https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation