Page to Page 로 attribute 보내는 법! (AURA<-> AURA)

1. 한 페이지내에서 버튼을 눌러 다른 창을 여는 경우

• 부모페이지에서 자식페이지로 데이터 전송시

//부모페이지 Parent.cmp

<aura:attribute name="test" type="String" />
<aura:attribute name="test2" type="String" />

<aura:attribute name="open" type="boolean" />

<aura:if isTrue="{!v.open}">    //open변수가 true라면
	<c:child test={!v.test} test2={!v.test2} />  //child페이지로 전송~
</aura:if>

<c:보낼페이지 자식페이지의 변수= 부모페이지의 변수> 이런형태이다.

//자식 페이지 Child.cmp

<aura:attribute name="test" type="String" />
<aura:attribute name="test2" type="String" />

• 자식페이지에서 부모페이지로 데이터 전송시

이때는 aura:event를 사용해줘야함!

참고 문서 : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component.htm

Component Events | Lightning Aura Components Developer Guide | Salesforce Developers

1. 먼저 VSCode를 사용중이라면 Ctrl + Shift + P로 commend창을 열고 'SFDX:Create Aura Event'를 만들어준다. 

2. 이벤트를 사용해 날릴 변수를 이곳에다가 지정해준다.

<!--c:ceEvent--> //이벤트의 이름
<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/> //던질 데이터를 담을 변수
</aura:event>

3. 이벤트를 날릴 변수들이 있는 곳 (자식파트) 에서 먼저 이벤트를 등록해준다.

<!--c:Child-->
<aura:component>
    <aura:registerEvent name="cmpEvent" type="c:ceEvent"/> //name= 이벤트이름 type=c:이벤트이름

    <h1>Simple Component Event Sample</h1>
    <p><lightning:button
        label="Click here to fire a component event"
        onclick="{!c.fireComponentEvent}" />    //이벤트를 fire할 on이벤트를 걸어준다.
    </p>
</aura:component>

/* childCotroller.js */
{
    fireComponentEvent : function(cmp, event) {
        // Get the component event by using the
        // name value from aura:registerEvent
        var cmpEvent = cmp.getEvent("cmpEvent"); //생성한 이벤트.evt 이름 적기
        cmpEvent.setParams({
            "message" : "A component event fired me. " +
            "It all happened so fast. Now, I'm here!" }); //evt에 있는 변수name : 값
        cmpEvent.fire(); //event 발동
    }
}

4. 이제 부모쪽으로 와서, 부모쪽에도 이벤트 핸들을 등록해준다.

<!--c:Parent-->
<aura:component>

    <aura:attribute name="messageFromEvent" type="String"/>
    <aura:attribute name="numEvents" type="Integer" default="0"/>

    <!-- child.cmp에서 등록한 aura:registerEvent의 name="cmpEvent"을 적어준다. -->
    <aura:handler name="cmpEvent" event="c:ceEvent" action="{!c.handleComponentEvent}"/>
    
    <p>{!v.messageFromEvent}</p>
    <p>Number of events: {!v.numEvents}</p>

</aura:component>

/* parentController.js */
{
    handleComponentEvent : function(cmp, event) {
        var message = event.getParam("message"); //이벤트로 발생한 변수명을 입력해줌

        cmp.set("v.messageFromEvent", message); //부모쪽에도 변수를 만들어 집어넣어줌
    }
}

 

 

이렇게 페이지간의 값 전송을 마무리합니다.. 계속 배우고 있는 중이라 추후 업데이트할 사항이 있으면 하겠습니다.