Parent to child communication in LWC

Hello Friends! In almost all scenarios we need to break our UI components into smaller different components. So that, we can separate the logic based on functionality to avoid complexity and reuse the components.

As we break down the components into smaller ones, we need a way to communicate between these components. This communication can be parent-to-child, child-to-parent sibling-to-sibling. In this post, we will focus on parnt-to-child.

I will take one simple use case to demonstrate parent-to-child communication in the Lightning Web Components framework.

How to send data from parent to child in LWC?

There are three options for how you can send data from parent to child in LWC.

• Public Properties - these are the component attributes/properties defined in the component with the @api decorator. The parent component can set values to these attributes from HTML as well as JavaScript.
• Public Functions - these are component functions with the @api decorator. The parent components can call these functions from the JavaScript code.
• Public Properties with getter-setter - These are the component attributes with @api get and set functions. The parent component can set the data in a similar way it sets for public properties. The difference is that you can process data sent to/from the parent component. The actual data is stored in a different private attribute from the component. This approach gives you flexibility so that you can alter the data received from parents in the child components.

Use Case

There are many different use cases where you will want to send data from parent to child components. But for the scope of this post, I will share a simple a few simple examples.

Code Example - Public Property

Parent.html

<template>
    <div class="app slds-p-around_x-large">
        <h2 class="slds-text-heading_large">Send data to child using public property</h2>

        <lightning-input
            label="Message"
            value={messageToChild}
            onchange={handleChange}
        ></lightning-input>

        <c-child message-from-parent={messageToChild}></c-child>

    </div>
</template>

Parent.js

import { LightningElement } from "lwc";

export default class Parent extends LightningElement {
  messageToChild="Hello!";

  handleChange(event){
    this.messageToChild = event.target.value;
  }
}

Child.html

<template>
    <div class="slds-var-m-horizontal_xx-small slds-var-m-bottom_x-small">
        <p>Message From Parent:</p>

        <p>{messageFromParent}</p>
    </div>
</template>

Child.js

import { LightningElement, api } from "lwc";

export default class Child extends LightningElement {
  @api
  messageFromParent = "";
}

Output

Related Articles

• Child To Parent Communication in LWC
• LWC Series