aura: method to call child component controller function not working

Question

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 ?

Answer 1

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

Answer 2

I don't think the component event is going to work here. So as you know there are 2 ways: Bubble and Capture.

In this case, if Parent component is firing bubble phase then it can handle that or component above it in the hierarchy can handle that. Child component never comes on the route. If Parent component fires capture phase then event starts from application root and only goes down till component which fired that event i.e parent component. Again Child component is not coming on the route.

The suggested way is to use which you have tried but not working. I believe something will missing in that and should try again. Or use application event instead of the component event but that would not be a good approach.

Answer 3

change the scope of aura:method from PUBLIC to public.. It will solve the issue