Last active
June 27, 2021 06:52
-
-
Save pozil/70e101ae3e22dc4330474ea2ffb040bb to your computer and use it in GitHub Desktop.
Lightning - Passing data up the component hierarchy via a component event
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:event type="COMPONENT"> | |
<aura:attribute name="param" type="String"/> | |
</aura:event> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:component> | |
<aura:handler name="myComponentEvent" event="c:componentEvent" action="{!c.handleMyComponentEvent}"/> | |
<c:componentEventSender/> | |
</aura:component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
handleMyComponentEvent : function(component, event, helper) { | |
var value = event.getParam("param"); | |
alert("Received component event with param = "+ value); | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:component> | |
<aura:registerEvent name="myComponentEvent" type="c:componentEvent"/> | |
<lightning:button label="Fire component event" onclick="{! c.fireMyComponentEvent }" /> | |
</aura:component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
fireMyComponentEvent : function(component, event, helper) { | |
var myEvent = component.getEvent("myComponentEvent"); | |
myEvent.setParams({"param": "It works!"}); | |
myEvent.fire(); | |
} | |
}) |
@khladkyi It should work. The event handler is already specified in componentEventReceiver.cmp at line #2.
for some reason it doesn't in some situations even i tried,not sure what is the exact cause
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The example is not working.
A missing piece of code is:
<c:componentEventSender myComponentEvent="{!c.handleMyComponentEvent}" />