0

This question already has an answer here:

I was testing passing data between two components using Component Events but something doesn't seem to be right. I am not able to get the value in the Handler component. Could someone let me know what i did wrong here?

Event: EventForCompEventsApp2.evt

<aura:event type="COMPONENT" description="Well, Hello there! I'm Event" >
<aura:attribute name="message" type="string" />

Event Registered Comp: CompForEventRegistering.cmp

    <aura:component >
    <aura:registerEvent name="compEvent" type="c:EventForCompEventsApp2" />
    <!-- aura:handler name="init" value="{!this}" action="{!c.doInit}" / -->
    <aura:attribute name="myText" type="string" default="John" />

    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">EVENTS</p>
                <h1 class="slds-text-heading--medium">COMPONENT EVENT TESTING</h1>
            </div>
        </div>
    </div>

    <lightning:layout horizontalAlign="spread" multipleRows="true">
        <lightning:layoutItem flexibility="auto" size="6" largeDeviceSize="2" padding="around-small">
            <ui:inputText label="Enter some text" class="field" value="{!v.myText}" />
            <lightning:button label="Add Text" onclick="{!c.takeInput}" />
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

Controller for above comp:

    ({
    takeInput : function(component, event) {
        var enteredText = component.get("v.myText");
        console.log(enteredText);
        var appEvents = component.getEvent("compEvent");
        //appEvents.setParams({"message" : enteredText});
        appEvents.setParams({"message" : enteredText});
        appEvents.fire();
        console.log("MEssage is **-->"+appEvents.getParam("message"));
    }
})

Event Handler Comp: CompForEventHandling.cmp

    <aura:component >

    <aura:attribute name="myAnotherText" type="String" default="**nothing fired yet**" />
    <aura:handler name="cmpEvent" event="c:EventForCompEventsApp2" action="{!c.handleEvent}"/>

    <p>First Name</p>
            <ui:outputText value="{!v.myAnotherText}" />
</aura:component>

Controller:

({
    handleEvent : function(component, event, helper) {
        var capturedText = component.get("v.myAnotherText");
        var theMessage = event.getParam("message");
        console.log('MESSAGE IS--->'+theMessage);
        component.set(capturedText, theMessage);
    }
})

And the Result:

enter image description here

marked as duplicate by glls, Reshma, Pranay Jaiswal, battery.cord, Raul Feb 22 at 15:27

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1

You need an Application Event here instead of a Component Event. By definition of Component Event:

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

In your current code, it doesn't seem that the component firing the event is within the containment hierarchy.


If you want to use Component Event, then your code should be modified so that in your CompForEventHandling component, you include CompForEventRegistering component. Something as below:

<aura:component>
    ...
    <c:CompForEventRegistering />
    ...
</aura:component>

And that the name attribute for registering and handling the component event should be exactly the same, i.e., when registering if you are using the name as say myEvent:

<aura:registerEvent name="myEvent" ... />

then while handling, you will need to use the same name:

<aura:handler name="myEvent" ... />
  • That was my first attempt. I tried this first and it didn't work as well. <lightning:layoutItem flexibility="auto" size="6" largeDeviceSize="2" padding="around-small"> <ui:inputText label="Enter some text" class="field" value="{!v.myText}" /> <lightning:button label="Add Text" onclick="{!c.takeInput}" /> </lightning:layoutItem> <c:CompForEventHandling /> – SunnyG Feb 19 at 21:12
  • Take a look at the documentation, it will provide you with required details. With the code that you have posted, component events will not work until corrected as explained in the answer. If you have issues with Application Events, you should open that as a different question. – Jayant Das Feb 19 at 21:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.