[SalesForce] aura: method to call child component controller function not working

Using <aura:method>, I am not able to call child component controller function from parent controller. Below code.

Parent Component

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

              <c:questionSectionPolitic aura:id="childQuestion"
                                           qstList="{!qstList}"
                                        recordId="{!v.recordId}"
                                      questionA="{!v.questionA}"
                                      questionB="{!v.questionB}"
                                      questionC="{!v.questionC}"
                                      questionD="{!v.questionD}"
                                      questionE="{!v.questionE}"
              />


<button type="button" aura:id="saveAndReturn" class="slds-button" onclick="{!c.save}" >Save and return
</button>

</aura:component>

Parent Controller

save : function(component,helper,event){
  var contactBtnId = component.get("v.contactBtnId");
  var contactName = document.getElementById('name'+contactBtnId).value;
  var recordId = component.get("v.recordId");

  var childComponent = component.find("childQuestion");
  childComponent.getScoreMethod(contactBtnId,contactName,recordId);
},

Child Component

<aura:component access="global">
    <aura:method name="getScoreMethod" action="{!c.calcScore}" access="PUBLIC">
      <aura:attribute name="contactId" type="String" />
      <aura:attribute name="contactName" type="String"  />
      <aura:attribute name="recordId" type="String"  />
    </aura:method>

</aura:component>

Child Controller

calcScore : function(component,event,helper){
    var contactId = event.getParam("contactId");
    var contactName = event.getParam("contactName");
 console.log('Inside Calc Score'); 
}

Now getting the error [childComponent.getScoreMethod is not a function]. What is wrong here ?

Best Answer

I did the following and it worked just fine.

So start here and add in stuff till it breaks. This is essentially what you posted since the rest of your code is missing.

Parent Component

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

    <c:childComponent aura:id="childQuestion"/>


    <button type="button" aura:id="saveAndReturn" class="slds-button" onclick="{!c.save}">Save and return
    </button>

</aura:component>

Parent Controller

({
    save : function(component,helper,event){

        var childComponent = component.find("childQuestion");
        childComponent.getScoreMethod('aa','bb','cc');
    }
})

Child Component

<aura:component description="childComponent" access="global">
    <aura:method name="getScoreMethod" action="{!c.calcScore}" access="PUBLIC">
        <aura:attribute name="contactId" type="String" />
        <aura:attribute name="contactName" type="String"  />
        <aura:attribute name="recordId" type="String"  />
    </aura:method>

</aura:component>

Child Controller Note the change in the getParam

({
    calcScore : function(component,event,helper){
        var args = event.getParam("arguments");
        var contactId = args.contactId;
        var contactName = args.contactName;
        console.log('Inside Calc Score: ' + contactId + ' - ' + contactName);
    }
})

This works just fine so something else is going on in the code you have not shown. Start here, confirm it works for you, add in, see what breaks it.

Inspiration: https://developer.salesforce.com/blogs/developer-relations/2017/04/lightning-inter-component-communication-patterns.html

enter image description here

Related Topic