Lightning Web Component: Event (Parent to Chlid / Child to Partner)

Events- Parent To Child Navigation

Sometimes it is needed to merge the two or more components and after merging we also need a data flow between the components.

To pass data from top-bottom (Parent to child) in the component list, the child or lower component must declare a public API, with this public API parent can pass the data to child

Public properties

Public properties are properties denoted by the @api decorator. It is also known as Public reactive property.

Note: It is crucial that You can assign a default value to public property, but you should never change the value of public property in the component.

Events- Child To Parent Navigation

Data must be passed up using Events. Events are the activity or the action that fires from the child component and listens to the parent.

LWC creates the Events using the Event or CustomEvent standard JavaScript classes. The CustomEvent class will allow you to store information in its detail property and then transmit those details(information) to the listeners of the event. Then, you can make an event target dispatch to invoking the dispatchEvent standard method.

Event propagation

Event propagation means launching a series of events in the web browser. This can be the top to bottom and bottom to top. Event propagation defines how to travel in the DOM tree.

There are two types of propagation that manage the Lightning component event handling.

• Bubble: Bubble event allow the event to fire upward direction
• Composed: composed determines whether the event should ignore the shadow DOM or not.

• Syntax:
  this.dispatchEvent(new CustomEvent('clickevevent', { bubbles: false , composed : false }));

Practical operation

LWC: Parent Component

HTML

<template>


    <div if:true={isMainPage}>
        <p>This is parent page.</p>
        <button class="slds-button slds-button_outline-brand" onclick={handleClick}>Go to Child Page</button>
    </div>
    <div if:true={isChildPage}>
        <c-child-Component onchildclick={handleChildEvent} message={message} ></c-child-Component>
    </div>


 </template>

JS

import { LightningElement,api,track } from 'lwc';

export default class ParentComponent extends LightningElement {
    @track isMainPage = true;
    @track isChildPage = false;
    @api message;
    constructor(){
        super();
        this.template.addEventListener('childclick', this.handleClick.bind(this));
    }

    handleClick(event){
        this.message = 'Parent send data to child.';
        this.isMainPage = false;
        this.isChildPage = true;
    }

    handleChildEvent(event){
        this.isMainPage = event.detail.isMainPage;
        this.isChildPage = event.detail.isChildPage;
    }

}

LWC: Child Component

HTML

<template>
    <div>
        <p>This is child page.</p>
        Message: {message}
        <button class="slds-button slds-button_outline-brand" onclick={clickbutton}>Go to Parent Page</button>
    </div>
 </template>

JS

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {

    @api message;

    clickbutton(){
        const event = new CustomEvent('childclick', {
            detail: {isMainPage:true,isChildPage:false}
            });
        this.dispatchEvent(event);
    }
}

Picture