Below code Covers Aura:Method, Aura.Action, ParenttoChild, ChildtoParent and Sibling Communication in one Single Application.
Step 1:
=========
componentEvents
=========
<aura:event type="COMPONENT" description="Event template" >
<aura:attribute name="firstnumber" type="Integer" />
<aura:attribute name="secondnumber" type="Integer" />
</aura:event>
Step 2:
==============
childcomp
===========
<aura:component>
<aura:attribute name="childoutput" type="Integer" />
<aura:attribute name="clickme" type="Aura.Action" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:registerEvent name="cmp1" type="c:componentEvents" />
<lightning:card title="Child 1">
<lightning:input type="integer" label="Number 1" aura:id="num1" />
<lightning:input type="integer" label="Number 2" aura:id="num2" />
<p
><lightning:button
label="Component Event"
onclick="{!c.fireComponentEvent}" variant="brand"
/>
</p>
<p
><lightning:button
label="Parent Method calling with Aura.action"
onclick="{!v.clickme}" variant="brand"
/>
</p>
</lightning:card>
</aura:component>
==============
childcomp controller
===========
({
child : function(component, event, helper) {
var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
component.set("v.childoutput",output);
},
fireComponentEvent : function(component, event) {
// Get the component event by using the
// name value from aura:registerEvent
var cmpEvnt=component.getEvent("cmp1");
var num1=parseInt(component.find("num1").get("v.value"));
var num2=parseInt(component.find("num2").get("v.value"));
cmpEvnt.setParams({"firstnumber":num1,"secondnumber":num2});
cmpEvnt.fire();
},
doInit :function(component, event, helper){
// component.set("v.childoutput",10000);
}
})
Step 3:
=========
childcomp2
========
<aura:component >
<aura:attribute name="prntoutput" type="Integer" default="0"/>
<aura:method name="Addition" action="{!c.Addition}" description="Sample method with parameters">
<aura:attribute name="param1" type="Integer" />
<aura:attribute name="param2" type="Integer" />
</aura:method>
<br/>
<br/>
<br/>
<lightning:card title="Child 2">
<p>Sibling out put</p>
{!v.prntoutput}
<br/>
<br/>
<br/>
</lightning:card>
</aura:component>
================
({
Addition : function(component, event, helper) {
var params = event.getParam('arguments');
if (params) {
var param1= params.param1;
var param2= params.param2;
var output=param1+param2;
}
component.set("v.prntoutput",output);
}
})
Step 4:
parentComp
==========
<aura:component >
<aura:attribute name="prntoutput" type="Integer" />
<aura:handler name="cmp1" event="c:componentEvents" action="{!c.parent}" />
<lightning:card title="Parent output">
{!v.prntoutput}
</lightning:card>
<br/>
<br/>
<br/>
<c:childcomp />
<c:childcomp2 aura:id="sibling" />
<!-- <c:childcomp clickme="{!c.Parentmethod}" /> -->
<!-- <c:childcomp cmp1="{!c.parent}"/> -->
</aura:component>
====
parentComp controller
=====
({
parent : function(component, event, helper) {
var fnumber=parseInt(event.getParam("firstnumber"));
var snumber=parseInt(event.getParam("secondnumber"));
var output=fnumber+snumber;
component.set("v.prntoutput",output);
var childCmp = component.find("sibling");
childCmp.Addition(fnumber,snumber);
},
Parentmethod:function(component, event, helper) {
alert("From Parent Method");
}
})
Step 5:
==================
Grantparent
==============
<aura:component implements="flexipage:availableForAllPageTypes" >
<aura:attribute name="prntoutput" type="Integer" />
<aura:attribute name="parentdata" type="Integer" default="100000" />
<aura:handler name="cmp1" event="c:componentEvents" action="{!c.Grandparent}" />
<lightning:card title="Grand Parent Output">
{!v.prntoutput}
<br/>
<br/>
<br/>
<c:parentComp prntoutput="{!v.parentdata}" />
</lightning:card>
</aura:component>
==================
Grantparent controller
==============
({
Grandparent : function(component, event, helper) {
var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
component.set("v.prntoutput",output);
}
})
Step 6:
=========
Alleventsapp
=======
<aura:application extends="force:slds">
<c:GrandparentComp />
</aura:application>
For another advance way of communication on top of these topics, please refer here: https://davesfdc.blogspot.com/2018/10/another-advanced-way-of-parent-to-child.html
Step 1:
=========
componentEvents
=========
<aura:event type="COMPONENT" description="Event template" >
<aura:attribute name="firstnumber" type="Integer" />
<aura:attribute name="secondnumber" type="Integer" />
</aura:event>
Step 2:
==============
childcomp
===========
<aura:component>
<aura:attribute name="childoutput" type="Integer" />
<aura:attribute name="clickme" type="Aura.Action" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:registerEvent name="cmp1" type="c:componentEvents" />
<lightning:card title="Child 1">
<lightning:input type="integer" label="Number 1" aura:id="num1" />
<lightning:input type="integer" label="Number 2" aura:id="num2" />
<p
><lightning:button
label="Component Event"
onclick="{!c.fireComponentEvent}" variant="brand"
/>
</p>
<p
><lightning:button
label="Parent Method calling with Aura.action"
onclick="{!v.clickme}" variant="brand"
/>
</p>
</lightning:card>
</aura:component>
==============
childcomp controller
===========
({
child : function(component, event, helper) {
var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
component.set("v.childoutput",output);
},
fireComponentEvent : function(component, event) {
// Get the component event by using the
// name value from aura:registerEvent
var cmpEvnt=component.getEvent("cmp1");
var num1=parseInt(component.find("num1").get("v.value"));
var num2=parseInt(component.find("num2").get("v.value"));
cmpEvnt.setParams({"firstnumber":num1,"secondnumber":num2});
cmpEvnt.fire();
},
doInit :function(component, event, helper){
// component.set("v.childoutput",10000);
}
})
Step 3:
=========
childcomp2
========
<aura:component >
<aura:attribute name="prntoutput" type="Integer" default="0"/>
<aura:method name="Addition" action="{!c.Addition}" description="Sample method with parameters">
<aura:attribute name="param1" type="Integer" />
<aura:attribute name="param2" type="Integer" />
</aura:method>
<br/>
<br/>
<br/>
<lightning:card title="Child 2">
<p>Sibling out put</p>
{!v.prntoutput}
<br/>
<br/>
<br/>
</lightning:card>
</aura:component>
================
({
Addition : function(component, event, helper) {
var params = event.getParam('arguments');
if (params) {
var param1= params.param1;
var param2= params.param2;
var output=param1+param2;
}
component.set("v.prntoutput",output);
}
})
Step 4:
parentComp
==========
<aura:component >
<aura:attribute name="prntoutput" type="Integer" />
<aura:handler name="cmp1" event="c:componentEvents" action="{!c.parent}" />
<lightning:card title="Parent output">
{!v.prntoutput}
</lightning:card>
<br/>
<br/>
<br/>
<c:childcomp />
<c:childcomp2 aura:id="sibling" />
<!-- <c:childcomp clickme="{!c.Parentmethod}" /> -->
<!-- <c:childcomp cmp1="{!c.parent}"/> -->
</aura:component>
====
parentComp controller
=====
({
parent : function(component, event, helper) {
var fnumber=parseInt(event.getParam("firstnumber"));
var snumber=parseInt(event.getParam("secondnumber"));
var output=fnumber+snumber;
component.set("v.prntoutput",output);
var childCmp = component.find("sibling");
childCmp.Addition(fnumber,snumber);
},
Parentmethod:function(component, event, helper) {
alert("From Parent Method");
}
})
Step 5:
==================
Grantparent
==============
<aura:component implements="flexipage:availableForAllPageTypes" >
<aura:attribute name="prntoutput" type="Integer" />
<aura:attribute name="parentdata" type="Integer" default="100000" />
<aura:handler name="cmp1" event="c:componentEvents" action="{!c.Grandparent}" />
<lightning:card title="Grand Parent Output">
{!v.prntoutput}
<br/>
<br/>
<br/>
<c:parentComp prntoutput="{!v.parentdata}" />
</lightning:card>
</aura:component>
==================
Grantparent controller
==============
({
Grandparent : function(component, event, helper) {
var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
component.set("v.prntoutput",output);
}
})
Step 6:
=========
Alleventsapp
=======
<aura:application extends="force:slds">
<c:GrandparentComp />
</aura:application>
For another advance way of communication on top of these topics, please refer here: https://davesfdc.blogspot.com/2018/10/another-advanced-way-of-parent-to-child.html