JPs Blog

Introduction

Events in Lightning Web Components (LWC) enable communication between components, allowing parent and child components to interact dynamically. LWC uses the Event API to handle event-driven programming efficiently.

There are two main types of communication using events:

1. Child to Parent Communication – Using CustomEvent
2. Parent to Child Communication – Using @api properties or @api methods

Child to Parent Communication (Custom Events)

When a child component wants to send data to its parent, it dispatches a Custom Event.

Example: Dispatching an Event from Child to Parent

Child Component (childComponent.js)

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

Child Component (childComponent.html)

<template>
    <lightning-button label="Send Message" onclick={sendData}></lightning-button>
</template>

Parent Component (parentComponent.js)

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
    message;

    handleMessage(event) {
        this.message = event.detail.text;
    }
}

Parent Component (parentComponent.html)

<template>
    <c-child-component onmessage={handleMessage}></c-child-component>
    <p>Received Message: {message}</p>
</template>

Explanation:

• The child component dispatches a CustomEvent named message.
• The parent component listens for the event using onmessage={handleMessage}.
• The handleMessage function updates the message property.

Parent to Child Communication (@api Properties)

When a parent component wants to send data to its child, it uses @api properties.

Example: Passing Data from Parent to Child

Child Component (childComponent.js)

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

Child Component (childComponent.html)

<template>
    <p>Message from Parent: {receivedMessage}</p>
</template>

Parent Component (parentComponent.js)

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
    message = 'Hello from Parent!';
}

Parent Component (parentComponent.html)

<template>
    <c-child-component received-message={message}></c-child-component>
</template>

Explanation:

• The child component uses @api receivedMessage to accept data from the parent.
• The parent component passes the message property using received-message={message}.

Calling Child Component Methods from Parent (@api Methods)

If a parent component needs to call a method in its child component, the child must expose it using @api.

Example: Calling a Child Method from Parent

Child Component (childComponent.js)

import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
    @api showAlert() {
        alert('Method called from Parent!');
    }
}

Parent Component (parentComponent.js)

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
    callChildMethod() {
        this.template.querySelector('c-child-component').showAlert();
    }
}

Parent Component (parentComponent.html)

<template>
    <lightning-button label="Call Child Method" onclick={callChildMethod}></lightning-button>
    <c-child-component></c-child-component>
</template>

Explanation:

• The child component exposes the showAlert method using @api.
• The parent component calls this.template.querySelector('c-child-component').showAlert().

Conclusion

Understanding events in LWC is essential for building interactive components.

• Use Custom Events to send data from child to parent.
• Use @api properties to send data from parent to child.
• Use @api methods to call child functions from a parent component.

In the next post, we will explore Lightning Data Service (LDS) to interact with Salesforce records without using Apex.

Stay tuned! 🚀