Communicating from the Child Component to the Parent Component in LWC

Communicating from the Child Component to the Parent Component in LWC

In Lightning Web Components (LWC), communication between components is essential for building interactive applications. In this post, we’ll explore how to communicate from a child component to a parent component using events, illustrated with a real-time example.

Step 1: Create the Parent Component

First, let's create the parent component called parentComponent. This component will manage a counter that can be incremented or decremented through actions performed in the child component.

1. Update parentComponent.js

Here's the JavaScript code for the parent component:

import { LightningElement } from 'lwc';

export default class Parentcomponent extends LightningElement {
    counter = 0;

    // Increase the counter value when the user clicks
    onClickAdd() {
        this.counter++;
    }

    // Decrease the counter value when the user clicks
    onClickSub() {
        this.counter--;
    }
}

2. Update parentComponent.html

Now, update the HTML code for the parent component:

<template>
    <lightning-card title="Parent Component" icon-name="action:preview">    
        <p class="slds-text-align_center slds-var-m-vertical_medium">
            Current Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
        </p>
    </lightning-card>   
</template>

Step 2: Create the Child Component

Next, let’s create the child component called childComponent. This component will provide buttons to increment and decrement the counter in the parent component.

1. Update childComponent.js

Here’s the JavaScript code for the child component:

import { LightningElement } from 'lwc';

export default class Childcomponent extends LightningElement {
    onclickAddition() {
        this.dispatchEvent(new CustomEvent('add'));
    }

    onclickSubstraction() {
        this.dispatchEvent(new CustomEvent('sub'));
    }
}

2. Update childComponent.html

Now, update the HTML code for the child component:

<template>
    <lightning-card title="Child Component" icon-name="action:upload">
        <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small">
                <lightning-button
                    label="Subtract"
                    icon-name="utility:dash"
                    onclick={onclickSubstraction}>
                </lightning-button>
            </lightning-layout-item>

            <lightning-layout-item flexibility="auto" padding="around-small">
                <lightning-button
                    label="Add"
                    icon-name="utility:add"
                    onclick={onclickAddition}
                    icon-position="right">
                </lightning-button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>    
</template>

Step 3: Update the Parent Component HTML to Include the Child Component

Finally, update the parentComponent.html to include the child component and handle its events:

<template>
    <lightning-card title="Parent Component" icon-name="action:preview">    
        <p class="slds-text-align_center slds-var-m-vertical_medium">
            Current Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
        </p>
    </lightning-card>

    <c-childcomponent
        class="slds-show slds-is-relative"
        onadd={onClickAdd}
        onsub={onClickSub}>   
    </c-childcomponent>      
</template>

Conclusion

With these steps, we’ve created a parent component that maintains a counter and a child component that can send events to modify that counter. This illustrates the powerful event-driven architecture in LWC, allowing for seamless communication between child and parent components.

Feel free to experiment further by adding more functionalities to your components! Happy coding!