How to get parent lightning component's attribute in child component?

Question

I have a parent component name "ParentComp" which has 3 attributes A,B and C of type String. I have a nested component "ChildComponent". I want to change the value of parent component's attribute B from child's java script controller.

How can i do that?

Answer 1

The framework will never have a way for you to get the parent component. That breaks encapsulation.

You have two options:

1. Fire an event that your containing component can listen for and act upon.

2. Pass in a reference to the attribute to the child component.

   <c:childComponent myValue="{!v.B}"/>
   

When the childComponent updates myValue, v.B will also update.

Answer 2

Hope this will help you out in your requirements.

1. Create the event.

Event: setAttributeEvent

<aura:event type="COMPONENT">
    <aura:attribute name="attributeValue" type="String"/>
</aura:event>

2. Register the event in child component.

Component: ChildComponent

<aura:component>
    <aura:registerEvent name="setAttribute" type="c:setAttributeEvent"/>
    <ui:inputText aura:id="val"/>
    <ui:button label="setParentAttributeValue" action="{!c.setValue}"/>
</aura:component>

3. Fire the event through the child component controller.

Controller: ChildComponentController

({
    setValue: function(component, event, helper)
    {
        var inputfieldValue = component.find("val").get("v.value");
        var setEvent = component.getEvent("setAttribute");
        setEvent.setParams({"attributeValue":inputfieldValue});
        setEvent.fire();
    }
})

4. Handle the event in parent component fired from child component.

Component: ParentComp

<aura:component>
    <aura:handler name="setAttribute" event="c:setAttributeEvent" action="{!c.setAttributeValue}"/> 
    <aura:attribute name="B" type="String"/>
    <c:ChildComponent/>
</aura:component>

5. Perform the necessary action.

Controller: ParentCompController

({
    setAttributeValue: function(component, event, helper)
    {
        var eventValue= event.getParam("attributeValue");
        component.set("v.B", eventValue);
    }
})

PS: Name used in RegisterEvent should match with Handler name, else event will not be handled.