How to Pass Data from Child Component to Parent Component in LWC using CustomEvent()

 

Hi Folks,  In this blog we will try to understand how we can pass data from Child LWC to Parent LWC using Custom Event.

Let's start without delay. First of all we will create child LWC component in which we will create an input field and whatever data the user will provide in this field and as soon as user clicks on send data button this input data will go to parent component and we will going to display this message in our parent component.

childComponent.html

<template>

<lightning-card title="Child Component" icon-name="utility:events">

<lightning-layout class="slds-m-around_medium">

<lightning-layout-item>

<lightning-input label="Enter Your Message to Pass"

onchange={handleMessageChange}></lightning-input>

</lightning-layout-item>

<lightning-layout-item class="slds-p-top_large">

<lightning-button label="Send Data" onclick={handleClick}>

</lightning-button>

</lightning-layout-item>

</lightning-layout>

</lightning-card>

</template>

To create a custom event in LWC, we will use the CustomEvent() constructor and To dispatch an event, we will call the EventTarget.dispatchEvent() method.

The only required parameter for the CustomEvent()  is a string indicating the event type. Set a detail property in the CustomEvent to pass data up to a receiving component. In the event listener's handler function, receiving components access the data in the detail property.

So if you see the below code, When a user enters a value into the input and clicks the send button, the component creates and sends a CustomEvent called passdatatoparentevent. The data detail in the event is this.messageToPass, which is the message that we are passing to the parent component.

childComponent.js

import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {

messageToPass;

handleMessageChange(event){

this.messageToPass=event.target.value;

}

handleClick(event){

// Creates the event with the messageToPass data.

const customEvent =new CustomEvent('passdatatoparentevent',

{detail:this.messageToPass});

// Dispatches the event.

this.dispatchEvent(customEvent);

}

}

childComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>55.0</apiVersion>

<masterLabel>Child Component</masterLabel>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>

We must now use an HTML attribute with the syntax oneventtype to listen for events in the parent component. Because our event type is passdatatoparentevent, our listener will be onpassdatatoparentevent.

So here is the html part for the parent Component. If you see in the below we are calling our child component in Parent Component and for listening the event we are using 'on' keyword with our eventtype and to handle this event we have created a function handleReceivedData.

parentComponent.html

<template>

<lightning-card title="Parent Component" icon-name="utility:company">

<div class="slds-p-around_medium">

<i>Message Received From Child: </i> <b> {messageReceivedFromChild} </b>

<br>

<c-child-component onpassdatatoparentevent={handleReceivedData}></c-child-component>

</div>

</lightning-card>

</template>

parentComponent.js

In parent JS, the default value for the messageReceivedFromChild is 'Waiting'. Once the event received from the child. We are going to handle this event. Here if you see the handler i.e. handleReceivedData once the event received we are passing the event detail value to messageReceivedFromChild.

import { LightningElement,track } from 'lwc';

export default class ParentComponent extends LightningElement {

@track messageReceivedFromChild='Waiting..!!';

handleReceivedData(event){

this.messageReceivedFromChild=event.detail;

}

}

parentComponent.js-meta-xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>55.0</apiVersion>

<masterLabel>Parent Component</masterLabel>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__HomePage</target>

<target>lightningCommunity__Default</target>

<target>lightningCommunity__Page</target>

</targets>

</LightningComponentBundle>

Let's see its demo now:-

We hope that you find this blog helpful, if you still have queries, don’t hesitate to contact us at omsfdc91@gmail.com.