0

My question is in regards to the fact that I need to get a value from Child component to Parent component. I want to directly call a method from the parent to the child to obtain some data from that child component. All this is fine but the question I have is about the following scenario. It looks like I can't dynamically pass the value from a component attribute to an aura:method attribute one:

<aura:component description="ChildComp">

<aura:attribute name="lookUp" type="String" default="Just Me" />

<aura:method name="GetMessageFromChildMethod" action="{!c.getMessage}" access="public">
    <aura:attribute name="Name" type="String" default="{!lookup}" />
</aura:method>

Something like the code above will not work.

So, the "standard" component attribute I need is already in use with the child component and there are some operations around that particular attribute.

What I want to know is:

  1. There is any problem in me changing the "standard" attribute from the child component to an inner aura:method attribute one?

  2. Will this change affect the behavior of that particular "standard component" attribute?

  3. If all of the above is rubbish, how can I pass dynamic values to an aura:method attribute?, if possible?

0

The <aura:method> declaration belongs on the component receiving the call. The method is considered part of the public API for that component.

In your scenario, the method would be declared on the parent, which is inverted from the typical scenario where child-to-parent communication uses events and parent-to-child communication uses public methods. Your child component will need to receive a reference to its parent and store it in an attribute in order to make the method call. (See example below).

The presence of <aura:attribute> declarations as part of the <aura:method> is a little confusing. The method's attributes actually define the parameters of the function that's being declared, and are independent of the attributes of both the calling and receiving component. The parameters passed to an <aura:method> are always dynamic insofar as they are passed in JavaScript, not declared in markup.

The example in the <aura:method> documentation is illuminating. I'm adding a bit of outer structure here to clarify. In your scenario, the receiving component is the parent, and the calling component is the child, which has an attribute parent to hold a reference to its parent component.

Receiving Component Markup

<aura:component ...>
    <aura:method name="sampleMethod" action="{!c.doAction}" 
      description="Sample method with parameters"> 
        <aura:attribute name="param1" type="String" default="parameter 1"/> 
        <aura:attribute name="param2" type="Object" /> 
    </aura:method>
<aura:component>

Receiving Component Controller

({
    doAction : function(cmp, event) {
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            // add your code here
        }
    }
})

Calling Component Markup

<aura:component ...>
    <aura:attribute name="parent" type="Aura.Component" />
    <aura:attribute name="childAttribute" type="String" />
<aura:component>

Calling Component Controller

When we invoke the <aura:method>, we specify the parameters as part of a JavaScript method call, rather than using Lightning value binds to establish them. It's more or less like any other method call. When we do this, we can source values from our (child) component's attributes, or from any other data source available in the context.

Here, we grab the value of a component attribute on the child and pass it as a parameter up to the parent, along with a static value.

myAction: function(component, event, handler) {
    var someOtherComponentReference = component.get('v.parent');

    someOtherComponentReference.sampleMethod(
        component.get('v.childAttribute'), 
        {'foo': 'bar'}
    );
}

See Calling Component Methods.

  • I can run the aura:method from my Parent component, that is all fine. Perhaps will be bette to say that I want the aura:method attribute to get a value from one of the component's attributes in the child component. Like, passing a value from a component attribute to an aura:method attribute ... don't know if it makes sense :) ... – Carlos Naranjo Jan 28 at 18:21
  • Sure. I'll revise the example to be a little more specific to that objective, @CarlosNaranjo. – David Reed Jan 28 at 18:24
  • Thanks... I'm going a bit crazy with this. Tried a few things but still can't get my aura:method attribute to contain values coming from the component attributes on the same component structure :( .. – Carlos Naranjo Jan 28 at 18:26
  • Does that clarify at all, @CarlosNaranjo? Basically, you're going to supply your parameter values in JS, not in markup within the <aura:method>. – David Reed Jan 28 at 18:34
  • Went through all the examples and I got it functioning and all. A few examples. But all of them are just targeting the attributes that are inside the aura:method, right? But I want to get the values in that same component that are not part of the aura:method params and past their values to the the ones inside the aura:method. There is where I can't keep moving forward. You have a component attribute and on the same component you have the aura:method attribute. I want the component attribute to pass his value to the aura:method attribute and then call it form the Parent. I'm stuck there.. – Carlos Naranjo Jan 28 at 18:47
0

Well, I have found the answer to my question... Here I show you all what I have found and successfully used to pass values from a Child component to a Parent component executed from the Parent component. I decided not to use the aura:method for this implementation.

Here is the way I did it.

I just want to pass the length of values in a list from the Child component to the Parent component.

This is the App from where you can fire this test:

<aura:application description="LightningEventsApp">
 <c:ParentComponent />
</aura:application>

Now the ParentComponent:

<aura:component description="ParentComponent">
    <aura:attribute name="lookUp" type="Integer" access="public"/>

    <c:ChildComponent aura:id="childComp" method="{!c.parentPress}" />

    <p> There you get the looUp value: {!v.lookUp}</p>
</aura:component>

ParentComponent.js

({
    parentPress : function (cmp, event, helper) {
        var objChild = cmp.find('childComp');
        alert("Method Called from Child " + objChild.get('v.myString').length);
        cmp.set("v.lookUp", objChild.get('v.myString').length);

    }

})

Now the ChildComponent:

<aura:component description="ChildComponent">
    <aura:attribute name="myString" type="List" access="public" />
    <aura:attribute name="method" type="Aura.action" />
    <lightning:button variant="brand" label="press" onclick="{!c.press}" />
</aura:component>

ChildComponent.js

({
    press : function (cmp, event, helper) {
        cmp.set('v.myString' , ['red', 'green', 'blue']);
        var me = cmp.get("v.method");
        $A.enqueueAction(me);

    }

})

If you run the App for this components and click on the button labeled press you will get a pop up window with the length for the v.myString:

alert("Method Called from Child " + objChild.get('v.myString').length);

On the same time you will see that the attribute on the Parent component will receive the list length and add that value to the attribute "lookUp".

This is exactly what I wanted... Any criticism, please, go at head and let me. know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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