Communication between LWC components

Today, we will see how to communicate between the LWC components. We will cover parent to child component communication and vice versa. We will see the various ways in which we can communicate between aura components and then we will compare it with the ways available to communicate between LWC components. A side by side comparison will help to have a better understanding of how things work in LWC.

Aura Components	LWC
Communication from the parent component to the child component
1. Passing attributes: We can pass attribute from parent component to child component. The binding between attributes can be one-way binding or two-way binding.	1. Public property: Creating a public property in the child component and passing the value from the parent component. Public property is reactive in nature.
2. Aura method: Define an aura method in the child component and call it from the parent component. Aura methods cannot return a value.	2. Public method: Create a public method in the child component and call it from the parent component. Public methods can return a value.

Public property: Let us have a look at the first approach of creating a public property in the child component and then passing the value to that public property from the parent component. The way to create a public property is to decorate it with @api decorator. Public property is reactive by default, which means if the value of the public property changes, the component will rerender itself.
Creating the public property in childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api param1;
}

Displaying the public property in childComponent.html

<template>
    Value of param1 in child component: {param1}
</template>

Passing the value to childComponent from parentComponent.html

<template>
<c-child-component param1={param1}></c-child-component>
</template>

parentComponent.js

import { LightningElement, track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track param1 = 'Ravi';
}

Public method: The second approach to pass information from parent to child component is by exposing a public method in the child component and then calling it from the parent component.
Creating the public method in childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api
    childFunction(param1){
        return 'child function called with parameter value: ' + param1 ;
    }
}

Calling the public method from parentComponent.js

import { LightningElement, track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track returnValue;
    handleButtonClick(){
        this.returnValue = this.template.querySelector('c-child-component').childFunction('Ravi');
    }
 
}

Displaying the return value in parentComponent.html

<template>
        <div class="slds-box">
            Parent Component<br/>
            <button onclick={handleButtonClick}>Call child component method</button><br/><br/>
            <div class="slds-box">
                Value returned from child component: <br/> {returnValue}
                <c-child-component></c-child-component>
            </div>
    </div>
</template>

Aura Components	LWC
Communication from the child component to the parent component
Component Events: Aura components make use of component events to pass on information from the child component to the parent component. The child component needs to register the event and the parent component will handle that event. A custom event file (.evt) needs to be created for the event.	JavaScript Events: LWC leverages the JS events to communicate information from the child component to the parent component. Salesforce recommends using the CustomEvent interface. The child component will dispatch an event and the parent component will handle it. This is much simpler as compared to component events communication model where the child needs to register the event, the parent needs to handle it and the developer also needs to create an event file.

Below is the example of how we dispatch a custom event from the child component. The CustomEvent interface has one required parameter which is the name of the event. Here we have named the event as "childvalue". The second parameter is optional, in which you can send attributes along with the event. Attributes are name-value pairs for sending the information.
childComponent.js

import { LightningElement } from 'lwc';
export default class ChildComponent extends LightningElement {
 
    handleButtonClick(){
        const customEvent = new CustomEvent("childvalue", {
            detail: '*****This is the information sent from childComponent*****'
        });
        this.dispatchEvent(customEvent);
    }
}

In the parent component, the events needs to be handled when you include the component. For example, the name of our CustomEvent is "childvalue", so while including the child component, you need to specify onchildvalue={methodName}. The word "on" needs to be prefixed to the name of the event.
parentComponent.html

<template>
    <div class="slds-box">
        Parent Component<br/>
        {valueFromChild}
        <c-child-component onchildvalue={updateValueFromChild}></c-child-component>
    </div>
</template>

parentComponent.js

import { LightningElement, track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track valueFromChild;
    updateValueFromChild(event){
        this.valueFromChild = event.detail;
    }
}

childComponent.html

<template>
    <div class="slds-box">
        Child Component<br/>
        <button onclick={handleButtonClick}>Fire Event</button><br/><br/>
    </div>
</template>