Parent Child Communication in LWC

In Lightning Web Components, as a developer we sometimes need to share data across different components to break down different logic to make them less complex or to make them reusable.

In the Lightning Web Component, we have three different ways for LWC to communicate.

The following are the ways:

1. Passing data down (Parent to Child)
2. Passing data up (Child to Parent)

3. Passing data with unrelated components (LMS or pub-sub)

Note: In this blog, we will discuss Parent to Child and Child to Parent Communication in LWC.

Parent to Child Communication

As the name implies in this type, we pass data to the child component from the parent component.

We include the child component in our Parent’s HTML then we pass data from parent to child. In the child component, we create a public property by applying @api decorator. We can expose any variable or any method by applying this decorator.

Then from the Parent component, we assign the value to this property either by HTML or through JS.

As @api is reactive, whenever a value changes in the child component passed by parent component, the child component automatically re-renders and displays the updated value.

Let’s take an example on how Parent to Child communicate. We created two component parentComponent and childComponent.

In child we have one public property message. Now in our parent component, we have a lightning-input-box and the value entered in the box is passed to the child component's message variable.

Below is the code snippet of the component

parentComponent.html

<template>
    
    <lightning-card  variant="Narrow"  title="Parent Component" icon-name="standard:account">
        <div class="slds-p-around_x-small">
    <lightning-input type="text" variant="standard" label="Message" placeholder="type here..." 
    onchange={handleChange}></lightning-input>
</div>
    <c-child-component message = {messageFromParent}></c-child-component>
</lightning-card>
</template>        

parentComponent.js

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement 
{
    messageFromParent = ''
    handleChange(event){
        this.messageFromParent = event.target.value
    }
}        

childComponent.html

<template>
<lightning-card  variant="Narrow"  title="Child Component" icon-name="standard:account">
<div class="slds-m-left--x-small">
    Message from Child : {message}
    </div>
</lightning-card>
</template>        

childComponent.js

import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement 
{
    @api message
    


}        

OUTPUT

Here we take a basic example, first in the parent component, we are storing the value in the messageFromParent variable from the lightning-input box.

Then we are passing the value of the messageFromParent variable to the child component’s public property message while calling the child component.

There is also another way by which we can pass data to the Child.

We can fetch the HTML element in parent and pass the data to child property like below:-

handleChange(event){
this.template.querySelector('c-child-component').message = event.target.value;
    }        

Then in HTML we don’t have to pass like message = {messageFromParent}

Note: The above method also works when you are calling any function of the child.

Child to Parent Communication

In child to parent, we are passing the data from child to its parent component. Here we use customEvent and dispatch them to their parent component.

Let’s understand it with the example. Suppose we have a scenario where on the click of a button we have to pass the message to parent component.

Below are the code snippet. In child html we passing the data on click of a button.

childComponent.html

<template>
<lightning-card  variant="Narrow"  title="Child Component" icon-name="standard:account">
<div class="slds-m-left--x-small">


    <lightning-input type="text" variant="standard" label="Message" placeholder="type here..."  onchange={handleChange} value={textVal}> </lightning-input>


    <lightning-button variant="brand" label="Pass Data" title="Pass Data" onclick={handleClick}></lightning-button>
</div>
</lightning-card>
</template>        

In the handler {handleClick} we are creating a custom event of type select and then dispatching the customEvent with the provided value in the detail property.

While creating the customEvent, the name of the event is required in string format. It will be used in parent component to catch the event by appending “on” before the event name.

Example: onselect={}

childComponent.js

import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement 
{
    textVal = ''
    
    handleChange(event){
        this.textVal = event.target.value
    }


    handleClick(){
        const eve = new CustomEvent('select',{
            detail:this.textVal
        })
        this.dispatchEvent(eve)
    }
}        

In Parent Html, we have to include our child component just like we did in parent to child. While calling the child component, we are catching the custom event by adding the prefix “on” before the event name select (onselect) just like standard events- onclick, onchange, etc.

parentComponent.html

<template>
    <lightning-card  variant="Narrow"  title="Parent Component" icon-name="standard:account">
        <div class="slds-p-around_x-small">
            Value recieved from child : {valueFromChild}
        </div>
    <c-child-component  onselect = {handleMessage}></c-child-component>
</lightning-card>
</template>        

In Parent Js, we are storing the value in the property valueFromChild from the event.detail in handleMessage method.

parentComponent.js

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement 
{
    valueFromChild


    handleMessage(event){
        this.valueFromChild = event.detail;
    }
}         

OUTPUT

Conclusion

In this blog, we take a look at parent and child communication in Lightning Web Component with examples.

Overall, the blog provides a complete guide on how related component communicate in Salesforce LWC, showcasing a practical example of communication with parent and child .

Let's dive into the world of Lightning Web Components: Learn Parent and Child communication in Lightning Web Component!???

Read the full article now! Also, stay tuned for more such content on Lightning Web Component(LWC).

#LightningWebComponents #Apex #Development #Salesforce #TrailblazerCommunity #Trailhead #LWC? #salesforce developer