4

I have a parent and a child component that can be nested like this

<c:parent>
   <c:child attribute="" />
   <c:child attribute="" />
</c:parent>

During the init of the parent I want to set an attribute of the children.

({
    init: function(cmp, evt, helper) {
        cmp.get("v.body").forEach(function(child) {
            ...
            child.set("v.attribute", value);
        });
    }
})

But this doesn't seem to work. Why? Do I have to use events or methods instead?

0
7

You cannot directly modify a child components attribute in parent.It provides that extra layer of security when each component can only modify its own attributes.

You can do it in 3 ways

  1. Pass an attribute by reference to child component from parent and whenever its changes the child component can handle it appropriately

  2. Use Application events to communicate with Child components

  3. Expose a method from the child component using aura:method and call it from the parent by using component.find("aura:id").methodname();

Check out this link from salesforce where they have explained this in detail.

1
  • You can set the value of a child component's attribute using cmp.find('auraId').set('v.attributeName', value). May 28 '20 at 0:44
0

Is this what you mean (because this works):

Parent component:

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <c:childComp aura:id="someChild" />
</aura:component>

Child component:

<aura:component>
    <aura:attribute name="someValue" type="String" /> 
    <div>{!v.someValue}</div>                                    
</aura:component>

Parent controller:

({
    doInit : function(component, event, helper) {
        component.find('someChild').set('v.someValue', 'something something text');
    }
})

You could also do this in the parent (to match that loop you did there):

Component:

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <c:childComp aura:id="someChild" />
    <c:childComp aura:id="someChild" />
    <c:childComp aura:id="someChild" />
    <c:childComp aura:id="someChild" />
</aura:component>

Controller:

({
    doInit : function(component, event, helper) {
        var compArr = component.find('someChild');
        for (var i = 0; i < compArr.length; i++) {
          compArr[i].set('v.someValue', 'something something text ' + i);
      }
    }
})
3
  • No this is not what I mean. I need to handle arbitrary amounts of unknown (meaning: no aura:id) child components. Jun 29 '17 at 10:55
  • 1
    How do you create arbitrary amounts of child components? by dynamically creating them in run time in the javascript code? I'm pretty sure (didn't test it), that you can give the aura:id dynamically as well.. and then just give the same aura:id to all your child components and run over them like in the modified example i gave up top.
    – Poster
    Jun 29 '17 at 10:59
  • Unsure why you were down voted. Your answer is correct and your question in the comments is legit. May 28 '20 at 11:05

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.