Skip to main content
bare minimum formatting
Source Link
Phil W
  • 38.1k
  • 5
  • 53
  • 106
     <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="firstName" type="String" />
    <aura:registerEvent name="contactDataEvent" type="c:ChildParentEvent"/>     
    
    <lightning:input 
                     aura:id="input1"
                     type="text"
                     name="input2" 
                     label="First Name"
                     value="{!v.firstName}"
                     onchange="{!c.searchKeyChange}"
                     placeholder="Search"/>   <br />  
          </aura:component>
     ({
          searchKeyChange : function(component, event, helper) {
        var cmpEvent = component.getEvent("ChildParentEvent");
        cmpEvent.setParams({"firstName" : component.find('input1').get('v.value')});
        cmpEvent.fire();
        alert('Event fired');
        console.log("cmpEvent Event Fired");
       } 
    })

ParentCompo:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="receivedFromChild" type="String" />

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="receivedFromChild" type="String" />
    
    <aura:handler name="contactDataEvent" event="c:ChildParentEvent" action="{!c.receiveDataController}"/>     
    
    <div class="slds-m-around_xx-large">
        <c:childCompo /> <br />
        Received value from Child = <ui:outputText value="{!v.receivedFromChild}" />
    </div>
    
</aura:component>

</aura:component>

ParentController:-

({ receiveDataController : function(component, event, helper) {
var receivedData = event.getParam("firstName");
console.log("Received from Child = ", receivedData); component.set('v.receivedFromChild' , receivedData);
} })

   ({
         receiveDataController : function(component, event, helper) {    
         var receivedData = event.getParam("firstName");  
         console.log("Received from Child = ", receivedData);
         component.set('v.receivedFromChild' , receivedData);     
      }
    })
     <aura:event type="COMPONENT" description="Event template" >
     <aura:attribute name="firstName" type="String" />
     </aura:event>
 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="firstName" type="String" />
<aura:registerEvent name="contactDataEvent" type="c:ChildParentEvent"/>     

<lightning:input 
                 aura:id="input1"
                 type="text"
                 name="input2" 
                 label="First Name"
                 value="{!v.firstName}"
                 onchange="{!c.searchKeyChange}"
                 placeholder="Search"/>   <br />  
      </aura:component>
 ({
      searchKeyChange : function(component, event, helper) {
    var cmpEvent = component.getEvent("ChildParentEvent");
    cmpEvent.setParams({"firstName" : component.find('input1').get('v.value')});
    cmpEvent.fire();
    alert('Event fired');
    console.log("cmpEvent Event Fired");
   } 
})

ParentCompo:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="receivedFromChild" type="String" />

<aura:handler name="contactDataEvent" event="c:ChildParentEvent" action="{!c.receiveDataController}"/>     

<div class="slds-m-around_xx-large">
    <c:childCompo /> <br />
    Received value from Child = <ui:outputText value="{!v.receivedFromChild}" />
</div>

</aura:component>

ParentController:-

({ receiveDataController : function(component, event, helper) {
var receivedData = event.getParam("firstName");
console.log("Received from Child = ", receivedData); component.set('v.receivedFromChild' , receivedData);
} })

 <aura:event type="COMPONENT" description="Event template" >
 <aura:attribute name="firstName" type="String" />
 </aura:event>
     <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="firstName" type="String" />
    <aura:registerEvent name="contactDataEvent" type="c:ChildParentEvent"/>     
    
    <lightning:input 
                     aura:id="input1"
                     type="text"
                     name="input2" 
                     label="First Name"
                     value="{!v.firstName}"
                     onchange="{!c.searchKeyChange}"
                     placeholder="Search"/>   <br />  
          </aura:component>
     ({
          searchKeyChange : function(component, event, helper) {
        var cmpEvent = component.getEvent("ChildParentEvent");
        cmpEvent.setParams({"firstName" : component.find('input1').get('v.value')});
        cmpEvent.fire();
        alert('Event fired');
        console.log("cmpEvent Event Fired");
       } 
    })

ParentCompo:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="receivedFromChild" type="String" />
    
    <aura:handler name="contactDataEvent" event="c:ChildParentEvent" action="{!c.receiveDataController}"/>     
    
    <div class="slds-m-around_xx-large">
        <c:childCompo /> <br />
        Received value from Child = <ui:outputText value="{!v.receivedFromChild}" />
    </div>
    
</aura:component>

ParentController:-

   ({
         receiveDataController : function(component, event, helper) {    
         var receivedData = event.getParam("firstName");  
         console.log("Received from Child = ", receivedData);
         component.set('v.receivedFromChild' , receivedData);     
      }
    })
     <aura:event type="COMPONENT" description="Event template" >
     <aura:attribute name="firstName" type="String" />
     </aura:event>
Source Link

Why shows this error in Aura lightning Events?

Error

ChildCompo:-

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="firstName" type="String" />
<aura:registerEvent name="contactDataEvent" type="c:ChildParentEvent"/>     

<lightning:input 
                 aura:id="input1"
                 type="text"
                 name="input2" 
                 label="First Name"
                 value="{!v.firstName}"
                 onchange="{!c.searchKeyChange}"
                 placeholder="Search"/>   <br />  
      </aura:component>

ChildController:-

 ({
      searchKeyChange : function(component, event, helper) {
    var cmpEvent = component.getEvent("ChildParentEvent");
    cmpEvent.setParams({"firstName" : component.find('input1').get('v.value')});
    cmpEvent.fire();
    alert('Event fired');
    console.log("cmpEvent Event Fired");
   } 
})

ParentCompo:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="receivedFromChild" type="String" />

<aura:handler name="contactDataEvent" event="c:ChildParentEvent" action="{!c.receiveDataController}"/>     

<div class="slds-m-around_xx-large">
    <c:childCompo /> <br />
    Received value from Child = <ui:outputText value="{!v.receivedFromChild}" />
</div>

</aura:component>

ParentController:-

({ receiveDataController : function(component, event, helper) {
var receivedData = event.getParam("firstName");
console.log("Received from Child = ", receivedData); component.set('v.receivedFromChild' , receivedData);
} })

ChildParentEvent:-

 <aura:event type="COMPONENT" description="Event template" >
 <aura:attribute name="firstName" type="String" />
 </aura:event>