Aura:method in lightning component

Till now we have seen how to handle communication between component's using events, now we will see how we can directly call a child component controller method from parent component controller method using Aura:method.

Sample syntax of Aura:method: (Declared in child)

<aura:method name="testMethod" action="{!c.someAction}"

  description="Test aura method with test parameter">

    <aura:attribute name="Test1" type="String" />  <!--optional parameter-->

</aura:method>

Note:

• Aura method can have an optional parameters. We use <aura:attribute> tag in Aura:method to declare parameter.

• We do not need access system attribute in <aura:attribute> tag.

How to call aura:method from parent controller?

childComponentName.auraMethodNameInChildController("Some Value we are passing to child component attribute");

Now let us see the use with simple example,

ParentComp:

<aura:component>

    <aura:attribute name="parentAttributeName" type="String" default="Parent Value"/>

    <p>{!v.parentAttributeName}</p>

    <c:ChildComp aura:id="ChildComp" />    <!-- Giving id to child comp-->

    <lightning:button label="Go to aura method"

          onclick="{!c.gotoAuraMethod}"/>

</aura:component>

ParentCompController.js

({
gotoAuraMethod : function(component, event, helper) {
     
        var chldComp=component.find("ChildComp");  //  Finding child component
        var res=chldComp.testMethod("From parent");  //   Hitting aura method
        component.set("v.parentAttributeName",res); 
     
}
})

ChildComp:

<aura:component>

<aura:method name="testMethod" action="{!c.someAction}"
  description="Test aura method with test parameter">

    <aura:attribute name="childAttributeName" type="String" />

</aura:method>

</aura:component>

ChildCompController.js:

({
someAction : function(component, event, helper) {
               
     var params=event.getParam('arguments');
        if(params)
        {
           var param1=params.childAttributeName;
         
        }
       return param1+"Appended child value";
}
})

Application:

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

Output:

After previewing application,

After clicking "Go to aura method" button,