In the last blog, We have seen how to pass data from parent to child lightning web component. Now, there will be scenario where you need to pass data from child to parent Lightning web component.
Before we start, know these points:-
- To create an event, use the
CustomEvent()
constructor. To dispatch an event, call theEventTarget.dispatchEvent()
method. - The
CustomEvent()
constructor has one required parameter, which is a string indicating the event type. As a component author, you name the event type when you create the event. You can use any string as your event type. However, we recommend that you conform with the DOM event standard. - Don’t prefix your event name with the string
on
, because inline event handler names must start with the stringon
. - Read more here:- Create and Dispatch Events
We have two Lightning Web Component childLwc and parentLwc. Our aim is to pass data from childLwc to parentLwc.
Let’s go through the Code:
childLwc.html
We have one input field of type number with onchange event handled in JavaScript file. We have to pass the input value to parent component where childLwc component is called.
<template>
<lightning-input
onchange={handleChnage}
type="number"
name="input1"
label="Enter a number"
></lightning-input>
</template>
childLwc.js
We are getting the value entered by user on change event and passing the data to parent component by creating a custom event with data using detail and dispatching it.
import { LightningElement, api } from "lwc";
export default class ChildLwc extends LightningElement {
@api progressValue;
handleChnage(event) {
this.progressValue = event.target.value;
// Creates the event with the data.
const selectedEvent = new CustomEvent("progressvaluechange", {
detail: this.progressValue
});
// Dispatches the event.
this.dispatchEvent(selectedEvent);
}
}
childLwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childLwc">
<apiVersion>46.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
We have another component where we are calling the childLwc and handling the event we have created.
parentLwc.html
We have a progress bar which gets the value from childLwc component. We are handling the event in parentLwc component and getting the data that have been dispatched with custom event.
<template>
<lightning-card title="Getting Data From Child">
<p class="slds-p-horizontal_small">
<lightning-progress-bar
value={progressValue}
size="large"
></lightning-progress-bar>
<c-child-lwc
onprogressvaluechange={hanldeProgressValueChange}
></c-child-lwc>
</p>
</lightning-card>
</template>
parentLwc.js
We are setting the value received from child to progress bar indicator. event.detail gives the value comes with custom event.
import { LightningElement, track } from "lwc";
export default class ParentLwc extends LightningElement {
@track progressValue = 0;
hanldeProgressValueChange(event) {
this.progressValue = event.detail;
}
}
parentLwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentLwc">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Demo
Deploy both the component to Your org and place it on page to see the results.

3 comments