Parent-to-Child Communication in Lightning Web Components (LWC)

In Lightning Web Components (LWC), it's important for components to communicate well to make strong and scalable apps. One way they do this is by passing information from a parent component to its child components. We'll talk about how this happens by passing attributes from the parent to the child components in LWC.

When different parts of an LWC need to share data or actions, they communicate with each other. One common situation is when a main component sends information or commands to its smaller parts. This process is known as parent-to-child communication.

Let's take a closer look at how attributes, which are like pieces of information, are sent from the parent component to its child components in LWC.

Understanding Parent-to-Child Communication

Parent-to-child communication in LWC involves the transmission of data or attributes from a parent component to its child components. This allows child components to receive necessary information from their parent and adjust their behavior or appearance accordingly.

Passing Attributes Using @api Decorator

One of the fundamental techniques for parent-to-child communication in LWC is by using the @api decorator. The @api decorator marks a property or method as public, allowing it to be accessed by other components. In the context of parent-to-child communication, parent components can expose attributes as public properties using the @api decorator. Child components can then reference these attributes in their markup or JavaScript to access the passed data.

Example

Consider a scenario where a parent component passes a message and array of objects attribute to its child component using the @api decorator:
Parent component:

<template>
    <lightning-card  variant="Narrow"  title="Parent to Child communication" >
    <div class="slds-m-around_x-small">        
        <c-child-component 
            message='Message to Child Component'
            carousel-data={data}
        >
        </c-child-component>
    </div>
    </lightning-card>
</template>

import { LightningElement,api } from 'lwc';
export default class POCParentComponent extends LightningElement {

data=[

        {
            src : "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-01.jpg",
            header : "First Card",
            description : "First card description."
        },  

        {
            src : "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-02.jpg",
            header : "Second Card",
            description : "Second card description."
        },  

        {
            src : "https://www.lightningdesignsystem.com/assets/images/carousel/carousel-03.jpg",
            header : "Third Card",
            description : "Third card description."
        }       

]
}

Child Component:

<template>
    <p>{message}</p>

    <lightning-carousel>
        <template for:each={carouselData} for:item="item">
            <lightning-carousel-image
                key={item.header}
                src = {item.src}
                header = {item.header}
                description ={item.description}
            >
            </lightning-carousel-image>
        </template>
    </lightning-carousel>
</template>

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

Output:

Conclusion

In LWC, sharing information from a big part to its smaller parts is really important. This helps make the components work together well. By using the @api decorator, developers can easily connect different parts of the app and share data smoothly. Learning how to do this well is key for LWC developers. It helps them create strong and flexible apps that work together seamlessly.