How to pass value from child LWC to parent AURA component

 In this blog post we will "How to pass value from child LWC to parent AURA component".

We can trigger event from child LWC comp and handled in parent AURA comp 

as shown in below example.

parentAuraComp.cmp

<aura:component>

<div>

    I am parent Aura Component.

</div>

<c:childLwcComp onmyfirstevent="{!c.handleLWCEvent}"></c:childLwcComp>

</aura:component>

 

parentAuraCompController.js

({

 

    handleLWCEvent : function(component, event, helper) {

        alert('LWC event handled');

        const childcompname= event.getParam('childcompname');

        const childcompdescription= event.getParam('childcompdescription');

        alert('childcompname is:'+childcompname);

        alert('childcompdescription is:'+childcompdescription);

      }

})

 

childLwcComp.html

<template>

    <div>

        I am child LWC component.

    </div>

    <lightning-button label="Pass Value To Parent Aura Comp" variant="brand" onclick={handleChildAction}></lightning-button>

</template>

childLwcComp.js

import { LightningElement,api } from 'lwc';

 

export default class ChildLwcComp extends LightningElement {

    @api childcompname='childLwcComp';

    @api childcompdescription='Test Description';

    handleChildAction(){

        const evt= new CustomEvent('myfirstevent', {detail:{childcompname:this.childcompname,childcompdescription:this.childcompdescription}});

        this.dispatchEvent(evt);

    }

 

}

auraAppForTesting.app

<aura:application>

<c:parentAuraComp></c:parentAuraComp>

</aura:application>    

Output:

TAGS: How to pass value from child lightning web component to parent aura component, pass event from lwc to aura, pass value from lwc to aura, lwc in aura component, handle lwc event in aura