Passing data from child component to the parent component using custom events without expected results on the parent

Question

I am trying to pass data from one child component to the parent component using custom events; I don't have the expected results on the parent component

<!--Event File : DisplayCount.evt-->

<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name = "count" type = "Integer" default ="0"/>
</aura:event>

<!--Child Component - Firing the event-->

<aura:component controller="FetchOpportunities"  implements="force:appHostable" >
    
     <aura:attribute name = "columns" type = "List"/>
    <aura:attribute name = "data" type = "Opportunity[]"/>
    <aura:attribute name = "count" type = "Integer" default = "2"/>
    <aura:registerEvent name="sampleComponentEvent" type="c:DisplayCount"/>
    
      <aura:handler name="init" value="{! this }" action="{!c.onLoad}"/>
      <div>
          Total number of opportunities : {!v.count}   
    <!--  <lightning:button label ="Click here" onclick="{!c.firecomponentevent}"/> -->
          <ui:button label = "Click here Now" press ="{!c.firecomponentevent}"/>
      <lightning:card footer="Card Footer" title="All Opportunities">
              <lightning:datatable
                keyField="id"
                data="{! v.data }"
                columns="{! v.columns }"
                hideCheckboxColumn="true"/>
          </lightning:card>  
          
        
          </div>
</aura:component>

<!--//Child JS file-->

({
    onLoad : function(component, event, helper) {
       console.log("Fetchdata");
        component.set('v.columns', [
            {label: 'Opportunity name', fieldName: 'Name', type: 'text'},
            {label: 'Stage name', fieldName: 'StageName', type: 'text'},
            {label: 'Close date', fieldName: 'closeDate', type: 'date'}
        ]);  
         
        var action = component.get("c.getOpportunity");
          action.setCallback(this, function(response){
            var state = response.getState();
             console.log("The value of state"- response.getState());
             if(state === "SUCCESS"){
                 component.set("v.data",response.getReturnValue());
                 component.set("v.count",response.getReturnValue().length);
             }
         });
        $A.enqueueAction(action);
    },
    
    firecomponentevent: function(component, event, helper){
        console.log("entered firecomponent");
      var childcompEvent =  component.getEvent("sampleComponentEvent");
                childcompEvent.setParams({
                    "count" : 56
                });
      childcompEvent.fire();
   }
})

<!--//Parent Component - Event handler-->
({
    onLoad : function(component, event, helper) {
       console.log("Fetchdata");
        component.set('v.columns', [
            {label: 'Opportunity name', fieldName: 'Name', type: 'text'},
            {label: 'Stage name', fieldName: 'StageName', type: 'text'},
            {label: 'Close date', fieldName: 'closeDate', type: 'date'}
        ]);  
         
        var action = component.get("c.getOpportunity");
          action.setCallback(this, function(response){
            var state = response.getState();
             console.log("The value of state"- response.getState());
             if(state === "SUCCESS"){
                 component.set("v.data",response.getReturnValue());
                 component.set("v.count",response.getReturnValue().length);
             }
         });
        $A.enqueueAction(action);
    },
    
    firecomponentevent: function(component, event, helper){
        console.log("entered firecomponent");
      var childcompEvent =  component.getEvent("sampleComponentEvent");
                childcompEvent.setParams({
                    "count" : 56
                });
      childcompEvent.fire();
   }
})

<!--//Parent JS file-->

({
     
    handleSubmit : function(component, event, helper) {
     // Submit buttom will automatically create the record
     //   component.find("opp").submit();
        
    },
    handleSuccess : function(component, event, helper) {
        component.set("v.reloadForm", false);
        component.set("v.reloadForm", true);
    },
    handlecomponentevent : function(component, event, helper) {
        console.log("came to parent component")
      var count   =   event.getParam("count");
        component.set("v.count",count);
    } 
})

Answer 1

Here is an example on how to pass data from child to parent (Got it from the official docs), And if possible can you share more detail or you're output.

1. Define the Custom Event:

In your parent component, define a custom event using the aura:event

<aura:component implements="force:appHostable">
    <aura:event name="childEvent">
        <aura:attribute name="data" type="String"/>
    </aura:event>
</aura:component>

This defines an event named childEvent with an attribute named data of type String.

2. Register the Event in the Child:

In your child component, register the event using the aura:registerEvent

<aura:component implements="force:appHostable">
    <aura:registerEvent name="childEvent"/>
</aura:component>

This tells the child component to listen for the event childEvent from its parent.

3. Fire the Event in the Child:

In the child component, when you want to pass data to the parent, create a new CustomEvent object: JavaScript

var childEvent = new CustomEvent("childEvent", {
    detail: { data: "This is the data from the child" }
});
this.dispatchEvent(childEvent);

Set the event name and detail object containing the data to be passed. Use this.dispatchEvent to fire the event from the child component.

4. Handle the Event in the Parent:

In your parent component, define an event handler function using the same event name as you specified in step 1:

handleChildEvent: function(event) {
    var data = event.getParam("data");
    // Do something with the received data
    console.log("Received data from child:", data);
}

The event object passed to the handler function contains the data sent from the child component. Use event.getParam("data") to access the passed data.