aura:method example in Lightning

Scenario: Scenario is same as posted in my previous post (Lightning Event Example) and the aim is also same and that is Pass value from child component to parent component.

Solution: 
To execute the above scenario, we can also use aura:method instead of aura:event.
For the same we will create a aura:method under child component and this method will return a string value and from parent component we will catch this value.

1. Create a Child component (childComponent.cmp). Under this child component declare a aura:method as shown in below example. aura:method has a name (this name will be used called from parent component), an action (for our example, this action method will return a string value) and set access as "PUBLIC".

childComponent.cmp

<!-- Child component with aura method -->
<aura:component >
    <aura:method name="messageFromChild" 

                 action="{!c.getMessageFromChild}" 

                 access="PUBLIC"/>
</aura:component>

childComponentController.js

//js controller for child component
({
 getMessageFromChild : function(component, event, helper) {
  return "##### I am under CHILD component. #####";
 }
})

2. Now create a parent component (parentComponent.cmp) and from parent component call the child component.
 Parent component have an local attribute (messageFromChild), with default value as "##### I am under PARENT component. #####" and a button (click on this button will call an action method, from where child method will be called and return value from child method will be set in local attribute.).
So, when this parent component will execute in UI, first it will show a button with an output text message as "##### I am under PARENT component. #####" and when the button will clicked then that output text message will display as "##### I am under CHILD component. #####".

parentComponent.cmp

<!-- Parent component to call child component to execute aura method -->
<aura:component implements="force:lightningQuickAction">
    <!-- Local attribute whith default value -->
    <aura:attribute name="messageFromChild" 
                    type="String" 
                    default="##### I am under PARENT component. #####"/>
    
    <!-- Child component calling. This should have aura:id -->
    <c:childComponent aura:id="childComp"/>
    
    <!-- On button click child aura:method will be called. -->
    <ui:button label="Call Child Method" press="{!c.callChildMethod}" />
    
    <!-- Initially display default message set in this parent componet.
   Once button click this attribute will be set by a string 
   value comming from child component. -->
    <p>{!v.messageFromChild}</p>
</aura:component>

parentComponentController.js

//js controller for parent component
({
 callChildMethod : function(component, event, helper) {
        //Child aura method calling logic.
        var childCmp = component.find("childComp");
        var rtnMsgFromChildMethod = childCmp.messageFromChild();
        
        //Set local attribute with string value, comming from child aura method.
        component.set("v.messageFromChild", rtnMsgFromChildMethod);
 }
})

Output on initial load (before click on button):

Output after button click: