Understand Aura Method in Lightning Component

In this article we are going to discuss about aura method used in lightning component to communicate between parent and child component.

With the help of aura method we can directly call a method in component's client side controller instead of firing and handling the component event. Basically we define aura method in child component and let parent component call the aura method of child component from its js controller which in result invoke the action written on aura method inside child component. During this parent can pass values which can be captured in child. Let's see the example below:

auraMethodDemoParent.cmp

<aura:component>
    <c:auraMethodDemoChild aura:id="compB"/>
        <lightning:button label="Call child method" onclick="{! c.onAction}" />
</aura:component>

auraMethodDemoParent.js

({
    onAction : function(component, event, helper) {
        var objCompB = component.find('compB');
        objCompB.sampleMethod("Param1 from parent", "Param2 from parent");
    }
})

auraMethodDemoChild.cmp

<aura:component>
    <!-- sampleMethod(param1, param2)-->
    <aura:method name="sampleMethod" action="{!c.doAction}"					
  description="Sample method with parameters"> 
    <aura:attribute name="param1" type="String" default="parameter 1"/> 
    <aura:attribute name="param2" type="Object" /> 
</aura:method>      
</aura:component>

auraMethodDemoChild.js

({
    doAction : function(cmp, event) {
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            var param2 = params.param2;
            alert('Received data from parent in child is '+param1+' and '+ param2);
           
        }
    }
})

When parent component clicks on Call Child Method button, we are invoking aura method defined in child component and passing the required attributes which in result execute the onaction method written in child component where parameters passed by parent are retrieved.

Output of the above code:

For more reference please visit the below link:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm

Bubble Phase and Capture Phase in Lightning Component Event

In this article we are going to understand two phases of lightning component event propagation. We will discuss the difference between both of them with real example.

Bubble phase and capture phase are available in component event in which event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

Bubble Phase:

In bubble phase the component that fired the event can handle it. The event then propagates from source event who fired the event to the application root which is top in the hierarchy, handlers of the components will invoke from bottom to top. It is the default phase if didn't mentioned. 

Capture Phase:

In bubble phase the event is captured and trickles down from application root which is top in hierarchy to the source component, handlers of the components will invoke from bottom to top.

Syntax for defining the phase:

<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEvent}" phase="capture"/>

Let's see the real example to understand the flow of events in both the phase 

cmpEvent.evt

<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

GrandParentCmp.cmp

<aura:component >
     <!--Bubble Phase-->
	<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInGrandParent}"/>-->
    <!--Capture Phase
    <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInGrandParent}" phase="capture"/>
	-->
    <c:ParentCmp/>
</aura:component>

GrandParentCmp.js

({
	handleCmpEventInGrandParent : function(component, event, helper) {
		var message = event.getParam("message");
        console.log('Event captured in GrandParent with message '+message);
	}
})

ParentCmp.cmp

<aura:component >
    <!--Bubble Phase-->
	<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInParent}"/> -->
     <!--Capture Phase
    <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventInParent}" phase="capture"/>
	-->
    <c:ChildCmp/>
</aura:component>

ParentCmp.js

({
	handleCmpEventInParent : function(component, event, helper) {
		var message = event.getParam("message");
        console.log('Event captured in Parent with message:'+message);
	}
})

ChildCmp.cmp

<aura:component >
	<aura:registerEvent name="cmpEvent" type="c:cmpEvent"/>
    <h1>Simple Component Event Sample</h1>
 <p><lightning:button label="Click here to fire a component event"
        onclick="{!c.fireComponentEvent}" />
 </p>
</aura:component>

ChildCmp.js

({
	fireComponentEvent : function(cmp, event) {
        var cmpEvent = cmp.getEvent("cmpEvent");
        cmpEvent.setParams({
            "message" : "A component event fired"});
        cmpEvent.fire();
    }
})

Output Of Bubble Phase:

Output Of Capture Phase:

For more reference, please visit:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component.htm