Aura Components

What is <aura:method /> in Aura Components?

There might be a requirement to invoke the Javascript method in the child component from the parent component and in such scenarios <aura:method /> comes handy.

Krishna Teja

Mar 7, 2022 • 1 min read

Aura framework is a component-based framework and when we break a huge functionality into small pieces the major challenge we might come across is sharing of the resources.

That's where <aura:method/> comes into the picture. I would say this feature is an absolute piece of beauty in the complete Aura Components framework. The flexibility it provides is next to none.

It solves one exclusive problem which is being able to invoke the JavaScript method in the child component from the parent component.

Here is the snippet of code displaying it.

<aura:application extends="force:slds">
    <c:ParentAuraComponent />  
</aura:application>

This is the Lightning App that holds the parent component

<aura:component>
    
    <lightning:button variant="brand" label="Call Aura Method"
                      onclick="{!c.handleAuraInvocation}" />
    
    <c:ChildAuraComponent aura:id="childComponent"/>
</aura:component>

This is the Parent component that holds the child component

({
    handleAuraInvocation : function(component, event, helper) {
        var childCmp = component.find("childComponent");
        childCmp.exposedChildMethod('SALESFORCE CASTS', 'IS NETFLIX FOR SALESFORCE');
    }
})

Controller of the Parent Component which invokes the Child Component method

<aura:component>
    <aura:method name="exposedChildMethod" action="{!c.handleAction}"> 
        <aura:attribute name="param1" type="String" default="parameter 1"/> 
        <aura:attribute name="param2" type="Object" /> 
    </aura:method>

</aura:component>

Child Component that houses the method

({
    handleAction : function(component, event) {
        //get method paramaters
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            var param2 = params.param2;
            alert(param1 + " " + param2);
        }
    }
})

The method that gets invoked by the parent

<aura:method /> is exactly similar to @api decorator in LWC. And this is the exact opposite of Component Events.

Hope this helps!