Lets assume we have the following hierarchy of Lightning Components
<c:master>
<c:sibling1 aura:id="sibling1" />
</c:master>
PART I
Is it possible for a child component (here sibling1
) to handle an APPLICATION event registered in master
's markup and fired in master
's js-controller?
I have an issue with that, where I have the same handler in master and sibling1 declared, but only master
is receiving (or handling) the event, but not sibling1.
Here is my code reduced to the basics
master.cmp
<aura:component controller="masterApex" implements="forceCommunity:availableForAllPageTypes,force:appHostable" >
<aura:registerEvent name="change" type ="c:changeEvent"/>
<aura:handler name="change" event ="c:changeEvent" action="{!c.handleChange}"/>
<a><ui:outputText value="do it" click="{!c.fireTheChange}"/></a>
<c:sibling1 aura:id="sibling1" />
</aura:component>
masterController.js
fireTheChange : function(component, event, helper) {
console.log("fireTheChange");
var fireEvent = component.getEvent("change");
fireEvent.fire();
},
handleChange : function(component, event, helper) {
console.log("handleChange");
},
sibling1.cmp
<aura:component controller="sibling1Apex" implements="forceCommunity:availableForAllPageTypes,force:appHostable" >
<aura:handler name="change" event ="c:changeEvent" action="{!c.handleChange}"/>
</aura:component>
sibling1Controller.js
handleChange : function(component, event, helper) {
console.log("____R_E_C_E_I_V_E_D____");
},
changeEvent.evt
<aura:event type="APPLICATION" >
</aura:event>
Now if i click on "do click" in the console.log I got only
fireTheChange
handleChange
but I'm missing
____R_E_C_E_I_V_E_D____
PART II
To interact with nested child components, is there only the APPLICATION event? Would a COMPONENT event work, too? Are there other ways for master
of interacting with sibling1
without events at all? I found that setting sibling1
's attributes from master
is easy in masterController.js
var sibling1 = component.find('sibling1');
sibling1.set("v.whateverAttributeName","aNiceValue");
Now is it also possible to execute siblings controller-methods and let it rerender from within masterController.js?
Or is there an other recommend pattern for that?