Introduction

Parent-Child Communication in LWC is an essential concept when building dynamic and interactive Salesforce applications. Lightning Web Components (LWC) provide multiple approaches to facilitate seamless data sharing between parent and child components. This blog explores the most effective ways to achieve parent-to-child and child-to-parent communication in LWC with practical examples.

Why Parent-Child Communication in LWC Matters

When designing modular and reusable components, it is important to enable proper data flow between parent and child components. This ensures maintainability and scalability. It also provides a smooth user experience. Whether you need to pass static data or dynamic updates, you must master Parent-Child Communication in LWC. It is a critical skill for Salesforce developers.

Understanding Parent-Child Communication in LWC

In LWC, components often need to share data to function cohesively. Parent components need to pass data to child components, or child components need to send information back to their parents. Achieving this bidirectional communication can be accomplished through several methods:

1. Parent to Child Communication:
   • Public Properties: Parents can pass data to children using public properties decorated with @api.
   • Public Methods: Parents can invoke public methods defined in child components to pass data or trigger actions.
2. Child to Parent Communication:
   • Custom Events: Children can dispatch custom events to send data or signals to parent components.

Passing Data from Parent to Child Components

1. Using Public Properties

a) Passing value of property declaratively

Public properties are marked with the @api decorator in LWC. They allow the parent component to pass data to the child component declaratively.

Example:

Parent Component HTML:

<template>
    <c-child-component childProperty={dataPassedFromParent}></c-child-component>
</template>

Parent Component JavaScript:

import { LightningElement } from 'lwc';
 
export default class ParentComponent extends LightningElement {
    dataPassedFromParent = 'Data from Parent';
}

Child Component JavaScript:

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

Public properties are the most common and straightforward way to implement Parent-Child Communication in LWC.

b) Using Imperative Property Setting

For scenarios where data needs to be updated dynamically, you can manipulate the DOM imperatively. This approach allows you to set child component properties programmatically.

Example:

Parent Component JavaScript:

setChildProperty() {
    const childComponent = this.template.querySelector('c-child-component');
    if (childComponent) {
        childComponent.childProperty = 'Dynamic Data from Parent';
    }
}

This approach offers flexibility and control, making it useful for dynamic Parent-Child Communication in LWC.

2. Using Public Methods

Public methods in child components can be invoked by parent components to perform actions or pass data. These methods are defined in the child component and decorated with @api.

Example:

childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api
    updateMessage(newMessage) {
        this.message = newMessage;
    }
}

parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    changeChildMessage() {
        const childComponent = this.template.querySelector('c-child-component');
        if (childComponent) {
            childComponent.updateMessage('New message from Parent');
        }
    }
}

Passing Data from Child to Parent Components

1. Using Custom Events

Custom events enable child components to communicate back to their parent components effectively. This is the standard method for child-to-parent communication.

To create a custom event, use the CustomEvent() constructor.

This constructor requires one mandatory parameter: a string representing the event type. While you can choose any string for your event type, the following guidelines are recommended:

• Avoid uppercase letters.
• Do not include spaces.
• Use underscores to separate words.
• Refrain from prefixing the event name with “on,” as inline event handler names must begin with “on.”

To trigger an event, use the EventTarget.dispatchEvent() method.

Handle an Event : 

There are two ways to listen to an event –

a) Declarative via html markup : For declarative event handling using HTML markup, add the “on” prefix to the event name in the parent component when referencing the child component’s event listener.

Example:

childComponent.js

import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    handleClick() {
        const event = new CustomEvent('message', {
            detail: { message: 'Hello from Child' }
        });
        this.dispatchEvent(event);
    }
}

parentComponent.html

<template>
    <c-child-component onmessage={handleMessage}></c-child-component>
</template>

parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    handleMessage(event) {
        const messageFromChild = event.detail.message;
        // Handle the message from child
    }
}

b) JavaScript using addEventListener method : To explicitly attach an event listener in the parent component, use the addEventListener method in JavaScript.

parentComponent.js

import { LightningElement , track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track msg;
  
    constructor() {
        super();   
        this.template.addEventListener('mycustomevent', this.handleCustomEvent.bind(this));
    }

    handleCustomEvent(event) {
        const textVal = event.detail;
        this.msg = textVal;
    }
}

parentComponent.html

<template>
    <div class="slds-m-around_medium">
        Value From Child :  {msg}
        <c-child-comp ></c-child-comp>
    </div>
</template>

childComponent.js

import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {

   handleChange(event) {
        event.preventDefault();
        const name = event.target.value;
        const selectEvent = new CustomEvent('mycustomevent', {
            detail: name ,bubbles: true
        });
      this.dispatchEvent(selectEvent);
    }
}

Best Practices for Parent-Child Communication In LWC

1. Use Declarative Binding Whenever Possible: For simple, static data, prefer public properties for better readability.
2. Limit Imperative Property Setting: Use it sparingly for dynamic scenarios.
3. Encapsulate Logic: Keep child components self-contained and expose only necessary properties or methods.
4. Test Thoroughly: Ensure smooth communication in all edge cases, especially when using custom events or imperative methods.

Comparing Approaches :