All ways to communicate between lightning components (Aura and LWC)

There are a lot of different ways to communicate between different types of lightning components (lwc to lwc, lwc to aura, aura to lwc etc). In this blog we will cover all different ways of communicating between different types of lwc and aura components.

Communication patterns between Lightning components

• LWC parent component to LWC child component

  From a parent component to child component you can just pass data through attributes without any events. sample code

• LWC child component to LWC parent component

  A CustomEvent needs to be fired from child lwc component and a listner needs to be added in parent component to send data from a child lwc component to it's parent lwc component sample code

• Between stand alone/independent LWC components - pubsub

  pubsub library provided by Salesforce is one approach to do this. sample code

• Between independent LWC component and Aura component - aurapubsub

  aurapubsub library provided by Salesforce is one approach to do this. sample code

• LWC child component to aura parent component [COMING SOON]
• Aura parent component to LWC child component [COMING SOON]
• Aura stand alone component to LWC stand alone component [COMING SOON]
• Lighting message service

Interactions with Visualforce Page

Still some features like PDF rendering are only supported in Visualforce. There is a chance you might need to interact between lightning components and visualforce components. Some examples are listed below,

• Embedding visualforce page inside aura [COMING SOON]
• Embedding aura app inside visualforce [COMING SOON]
• Embedding visualforce page inside lwc [COMING SOON]
• Embedding lwc inside visualforce page [COMING SOON]

Communication between independent lightning web components - pubsub

You can use pubsub library or lightning message service to communicate between components that are not in same DOM hierarchy. These methods can be used to communicate between sibling components in an outer lwc component or between to lwc components that are dropped separately in lightning app builder.

Here we will go through an example of lwcComponentA that displays three car company names using radio button. When a car company is selected in this component we will fire a carselected event from lwcComponentA with the name selected by the user. A separate lwcComponentB, that is outside direct DOM hierarchy of lwcComponentA, will listen to this event and display the selected name in lwcComponentB.

Example

1) Create a utility lwc component with name pubsub. Copy paste below code into it's JavaScript file. Please note that this is a utility component provided by Salesforce. But current version available in the link is doing pageRef check and it is not working as expected. So use below version shared by another Salesforce team member instead.

2) Create a lwc component with name lwcComponentA

3) Create a lwc component with name lwcComponentB

3) Create a parent lwc component with name parentLwc that can contain both components

3) Now if you surface the parent component in lightning experience, it will look like

Explanation

In lwcComponentA component, when value of car is changed in the radio button, it calls JavaScript method in controller sendDataTolwcComponentB. This function uses fireEvent method in pubsub library and fires a custom event with name carselected. Selected carname is also passed as data in the event payload.

lwcComponentB component, has a listener added for carselected event. It is achieved by using registerListener method in pubsub utility. Inside connected callback we add a listener using the line registerListener('carselected', this.diplaySelectedCar, this);. This basically tells "whenever a carselected event is received, call diplaySelectedCar method in JavaScript controller.

Finally when diplaySelectedCar method is called, we take value from the event payload and assigns to valueGotFromA variable in JavaScript

Things to Note

• This is a common pattern to pass values between independent lwc components in same page.
• Make sure that you are using the pubsub library shared above. Otherwise you might get an error pubsub listeners need a "@wire(CurrentPageReference) pageRef" property.