LWC Communication Part-2 (Passing data from Child to Parent in LWC)

sanketthoughts

7 years ago

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 the EventTarget.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 string on.
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.

Demo

Share this: