[Salesforce] pass value from Child component to Parent component

참조  

 

> 사용하게 된 계기

: 버튼을 보여주는 컴포넌트 아래에 modal을 만들지 않고, 자식 컴포넌트에 modal을 생성해서 버튼 클릭시에 보여주려고 했다. 

 

ParentComponent

<aura:component>
    <aura:method name="greetingMethod" action="{!c.getParams}" access="public">
        <aura:attribute name="isLoad" type="Boolean" default="false"/>
    </aura:method>

    <lightning:button variant="brand" label="버튼" title="버튼" onclick="{! c.callChildComponent }" class="slds-button_brand" />
    //isLoaded 변수에 따라 childComponent의 modal창을 보여줄지 말지 결정하기 위해서 
    <aura:if isTrue="{!v.isLoaded}">
    	<c:HUJ_ChildComponent parent="{!this}" target="{!v.fields}"/>
    </aura:if>
</aura:component>

({
    callChildComponent : function(component, event, helper) {
       component.set('v.isLoaded', true);
    },
    
    getParams : function(component, event) {
        //get method paramaters
        var params = event.getParam('arguments');
        if(params) {
        var param1 = params.isLoad;
            if(!param1){
                component.set('v.isload', false);  
            }
        }
    }
})

 

ChildComponent

<aura:attribute name="parent" type="Aura.Component"/>
<lightning:button onclick="{! c.closeModal }" disabled="{! v.isDisabled}" label="취소" title="취소"/>

({
    // modal 닫기
    closeModal : function(component, event, helper) {
        var parentComponent = component.get("v.parent");                         
        parentComponent.greetingMethod(false); 
    }
})

 

>결과

v.isLoaded

default => false

부모 컴포넌트에서 버튼을 누르면  => true

자식 컴포넌트에서 취소 버튼을 누르면 => false

닫힘=> 열림 => 닫힘