[세일즈포스] Aura 부모 컴포넌트에서, 자식 컴포넌트의 함수 직접 호출

 

Aura에서는 부모 컴포넌트가 자식 컴포넌트의 메서드에 직접 접근할 수 없기 때문에, 이벤트 핸들링이나 Aura 메서드를 사용하여 원하는 작업을 수행할 수 있다.

 

- 리드 전환시 리드 회사명으로 자식 looup 컴포넌트에 정의 되어 있는 함수를 호출해서 , 조회필드의 초기 리스트 값을 설정하고자 함.

방법: Aura 메서드로 자식 컴포넌트의 함수 호출

1. Aura 메서드를 자식 컴포넌트에 추가하여 searchRecords 함수를 호출할 수 있도록 설정
2. 부모 컴포넌트에서 Aura 메서드 호출을 통해 자식 컴포넌트의 함수를 실행.

1. 자식 컴포넌트에 Aura 메서드 추가

자식 컴포넌트 에서 AuraEnabled 메서드를 정의하여, 부모 컴포넌트가 호출할 수 있도록 설정

 

AU_Lookup.cmp (자식 컴포넌트)

<aura:component >
    <aura:attribute name="enteredValue" type="String" default=""/>
    
    <!-- Aura 메서드 정의 -->
    <aura:method name="triggerSearch" action="{!c.searchRecords}">
        <!-- 필요한 경우, searchRecords 함수에 전달할 파라미터 추가 가능 -->
        <aura:attribute name="searchValue" type="String"/>
    </aura:method>

    <!-- Lookup 입력 필드 -->
    <ui:inputText aura:id="lookUpInputElement" 
                  value="{!v.enteredValue}" 
                  class="slds-input slds-combobox__input inputHeight border0"
                  updateOn="keyup"
                  keyup="{!c.searchRecords}" 
                  placeholder="{!v.placeholder}"/>
</aura:component>

 

자식 컴포넌트의 컨트롤러(JS)에  searchRecords() 함수 정의

({
    searchRecords: function(component, event, helper) {
        var searchValue = component.get("v.enteredValue");
        console.log("searchRecords called with value: ", searchValue);

        // 원하는 검색 로직 수행
        // 예: helper.searchDatabase(searchValue);
    }
})

 

2. 부모 컴포넌트에서 Aura 메서드 호출

부모 컴포넌트에서는 doInit 또는 특정 함수에서 find 메서드를 사용하여 자식 컴포넌트를 참조하고, triggerSearch 메서드를 호출

 

부모 컴포넌트 (LeadConvertComponent.cmp)

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

    <!-- AU_Lookup 컴포넌트 -->
    <c:AU_Lookup aura:id="AU_AcountLookup" enteredValue="테스트" />
</aura:component>

 

LeadConvertComponentController.js 

({
    doInit: function(component, event, helper) {
        var lookupComponent = component.find("AU_AcountLookup");
            
        // triggerSearch 메서드 호출
        lookupComponent.triggerSearch("검색어");
    }
})