Lesson: 31 | Communicate from Child to Parent

Child Component:

HTML

<template>
    <lightning-button label="Click Me" onclick={handleButtonClick}></lightning-button>
</template>

Java Script

import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    handleButtonClick() {
        const event = new CustomEvent('childbuttonclick');
        this.dispatchEvent(event);
    }
}

Parent Component:

In the child component, we're creating a lightning-button element and attaching a click event handler that fires a custom event named childbuttonclick.

HTML

<template>
    <c-child-component onchildbuttonclick={handleChildButtonClick}></c-child-component>
    <template if:true={buttonClicked}>
        <p>The child button was clicked.</p>
    </template>
</template>

Java Script

import { LightningElement, track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track buttonClicked = false;

    handleChildButtonClick() {
        this.buttonClicked = true;
    }
}

In the parent component, we're including the child component and binding the onchildbuttonclick event to the handleChildButtonClick() method. When the child button is clicked, the handleChildButtonClick() method is called and sets a boolean variable to true. This variable is used to conditionally render a paragraph element that says "The child button was clicked."

To use this example, create two new LWC components named childComponent and parentComponent, and copy and paste the corresponding HTML and JavaScript code into the appropriate files. Then, run the application and open the parent component to see the child button. Click the button to see the paragraph element appear that indicates that the child button was clicked.

Prev You need to login to have access to the quizzes. Next

Mastered by 8 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Lesson: 31 | Communicate from Child to Parent

HTML

Java Script

Video

HTML

Java Script

Video

Lightning Web Components

Login to your account

Lesson: 31 | Communicate from Child to Parent

HTML

HTML

Lightning Web Components