How to call method of child LWC component from parent Aura component?

To call method of child LWC from parent Aura component we will need to decorate the child LWC method with @api decorator, In AURA component we need to first assign aura id to child LWC as highlighted in bold. Using component.find() we can get the child LWC and finally call its method as highlighted in AURA component JS file.

. Salesforce directory link

parentAuraComp.cmp

<aura:component>

<div>

    I am parent Aura Component.

</div>

<c:childLwcComp aura:id="childLwcCompId"></c:childLwcComp>

<lightning:button label="Call Child LWC Comp" variant="brand" onclick="{!c.callChildMethod}" ></lightning:button>

</aura:component>

parentAuraCompController.js

({

    callChildMethod : function(component, event, helper) {

        var findChildComp=component.find(‘childLwcCompId’); // this return the LWC component Id

        findChildComp.lwcCompMethodDescription(‘this messag from AURA to LWC’); //this method send parameter
to LWC component

   }

})

childLwcComp.html

<template>

    <div>

        I am child of LWC component.

    </div>

</template>

childLwcComp.js

import { LightningElement,api } from 'lwc';

 

export default class ChildLwcComp extends LightningElement {

    
@api // this method will call by LWC because this is declare as public by @api

     lwcCompMethodDescription(messageFromAura){

        alert('messageFromAura :'+ messageFromAura);
        
     }

 
}

for testing we need create lightning App and embed AURA component in this App.

<aura:application>

<c:parentAuraComp></c:parentAuraComp>

</aura:application>

https://uniquesymbol.com/