In this blog post we will learn "How to call lwc method from Aura component".
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');
findChildComp.lwcCompMethodDescription('Hi I am Aura Component
Message');
}
})
childLwcComp.html
<template>
<div>
I am child LWC component.
</div>
</template>
childLwcComp.js
import { LightningElement,api } from
'lwc';
export default class ChildLwcComp
extends LightningElement {
@api
lwcCompMethodDescription(messageFromAura){
alert('messageFromAura :'+ messageFromAura);
}
}
auraAppForTesting.app
<aura:application>
<c:parentAuraComp></c:parentAuraComp>
</aura:application>
Output:
TAGS: how to call lwc method from Aura component,call lwc from aura component,pass attribute from aura to lwc,aura to lwc communication,
No comments:
Post a Comment