Saturday, December 19, 2020

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".


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:


How to pass value from child LWC to parent AURA component

How to pass value from child LWC to parent AURA component

How to pass value from child LWC to parent AURA component

How to pass value from child LWC to parent AURA component

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

No comments:

Post a Comment