Pass Data/Values From Child LWC Component To Parent LWC Using Custom Event

How to Pass Values From Child to Parent component in LWC

In this post we will see how to pass data from child to parent in Lwc. If we want to fire parent lightning web component function from child LWC component function when child function fired or if we need pass data from child LWC component to parent Lightning web component then we need to use custom events. Unlike aura component we don't to create separate event in lightning web components.

Steps for child to parent communication in LWC:
1. Define a custom event in child lightning web component.
2. Add values (which needs to pass to parent lwc) to event. (optional)
3. Dispatch the event.
Example:

const lwcEvent= new CustomEvent('eventname', {
   detail:{varible1:value, varible2 : value} 
  });
 this.dispatchEvent(lwcEvent);

Here eventName is user defined key word for event, which is going to use in child component tag in parent component. Make sure that event name should not be starts with "on" word.
4 . Handle event on parent lightning web component with the "oneventname" handler function. Here oneventname is the dispathed event in child component(see above code), 'on' should be added before event name.

<c-child-lwc-component oneventName={handleEvent}></c-child-lwc-component>

5. By using event.detail.variableName we will get value which is passed from child lwc.

Example Scenario for Passing values from Child Lightning web component to Parent Lightning web component.

In Below example we have a child component(lwcChild) where we are showing list of account records. In parent component(lwcParent) we are referring child component. on click of record in table, we are firing custom event and dispatching the event with selected account id and then we are showing details of respective account in parent component.

AccountController.cls

public with sharing class AccountController {
        @AuraEnabled(cacheable=true)
        public static List<account>  getAccountList(){
        return [SELECT Id, Name,Phone,Industry FROM Account WITH SECURITY_ENFORCED LIMIT 10];
    }
}

Create new lightning web component: lwcChild
lwcChild.js

import { LightningElement, api } from 'lwc';
export default class LwcChild extends LightningElement {
    @api accountList;
    handleAccountClick(event) {
        let selectedAccId = event.currentTarget.getAttribute("data-key");
        //custom event
        const passEvent = new CustomEvent('accountselection', {
            detail:{recordId:selectedAccId} 
        });
       this.dispatchEvent(passEvent);
    }
}

lwcChild.html

<template>
    <table class="slds-table slds-table_bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Industry</th>
            </tr>
        </thead>
        <tbody>
            <template if:true={accountList}>
                <template for:each={accountList} for:item="acc">
                    <tr key={acc.Id} data-key={acc.Id} onclick={handleAccountClick}>
                        <td>{acc.Name}</td>
                        <td>
                            <lightning-formatted-phone value={acc.Phone}></lightning-formatted-phone>
                        </td>
                        <td>{acc.Industry}</td>
                    </tr>
                </template>
            </template>
        </tbody>
    </table>
</template>

Create new lightning web component: lwcParent
lwcParent.js

import { LightningElement,wire,track } from 'lwc';
import getAccountList from '@salesforce/apex/AccountController.getAccountList';

export default class LwcParent extends LightningElement {
    @track selectedAccountId;
    @wire(getAccountList) accountList;  
    onAccountSelection(event){
        this.selectedAccountId = event.detail.recordId;
    }
}

lwcParent.html

<template>
    <div class="row">

        <div class="column" style="float: left; width: 70%; padding: 10px;">
            <div class="slds-box">
                <template if:true={accountList.data}>
                    <c-lwc-child account-list={accountList.data} onaccountselection={onAccountSelection}></c-lwc-child>
                </template>
            </div>
        </div>

        <div class="column" style="float: right; width: 30%; padding: 10px;">
                <div class="slds-box">
                    <div slot="actions">
                        <div class="slds-box">
                            Selected Account Information
                        </div>
                    </div>
                    <lightning-record-view-form record-id={selectedAccountId} object-api-name="Account">
                        <div class="slds-box slds-them_shade">
                            <lightning-output-field field-name="Name"></lightning-output-field>
                            <lightning-output-field field-name="Phone"></lightning-output-field>
                            <lightning-output-field field-name="Industry"></lightning-output-field>
                        </div>
                    </lightning-record-view-form>
                </div>
            </div>
    </div>
</template>

Output

Subjects:

Child to Parent in LWC Data from Child LWC to Parent LWC Lightning Web Components Lightning Web Components Basics LWC LWC Basics

Share This: