How To Use Child To Parent Communication In LWC In Salesforce

In this blog, we will learn the child to parent communication in LWC. We are going to create a progress bar component to understand how a child event can be bubbled up to the parent. We will use the custom event of js to achieve this. To create a custom event we will use CustomEvent() constructor syntax as :

event = new CustomEvent(typeArg, customEventInit);

Can check https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
To fire the trigger use the dispatchEvent method of EventTarget.
Can check https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Also Read: How To Use Properties In Lightning Web Component

Now let’s get your hand dirty with code first and then will understand the flow of code.

InputProgressBar.html

<template>
    <lightning-tile label='Child Component'>
        <lightning-input name='barMeter' label='Enter Value for Progress Bar' onchange={progress}></lightning-input>
    </lightning-tile>
</template>

inputProgressBar.js

import { LightningElement } from 'lwc';

export default class InputProgressBar extends LightningElement {
    
    progress(event){
        const custEvent = new CustomEvent(
            'callpasstoparent', {
                detail: event.target.value 
            });
        this.dispatchEvent(custEvent);
    }
}

parentBarCmp.js

import { LightningElement, track } from 'lwc';

export default class ParentBarCmp extends LightningElement {
    @track barVal = 10;
    passToParent(event){
        this.barVal = event.detail;
    }

}

parentBarCmp.html

<template>
    <lightning-tile label='Parent Bar Component'>
        <lightning-progress-bar value={barVal} size="large"></lightning-progress-bar>
    </lightning-tile>
    <c-input-progress-bar oncallpasstoparent={passToParent}></c-input-progress-bar>
</template>

parentBarCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

1. First, we have created a child component to receive user input and onchange handler is used to capture the input value.
2. We have created a parent component that is showing a progress bar based on input that the user enters in the child component.
3. So we need to pass this input value from child to parent component and to achieve this we used the event bubbling concept.
4. We have created a custom event and passed that input value and fired that event using dispatchEvent. This way callpasstoparent event fired

this.dispatchEvent(custEvent);

5. When this event fired it calls passToParent. In this event, we received the value and set it as progress bar value

<c-input-progress-bar oncallpasstoparent={passToParent}></c-input-progress-bar>

This way we are passing value from child to parent component. Using the below syntax can send multiple data as well.

detail : {
 param1: value1,
param2 : value2
}

I hope this blog helped you. Keep learning and if you require salesforce development services then get in touch with our salesforce consulting team.

Learn more: How To Create Web To Lead / Web To Case Forms and How To Handle Form Values On Event In LWC