[LWC] 부모 자식 컴포넌트간 이벤트 통신하는 방법 - How to communicate events between parent and child components

 

0. 예시상황

• 자식 컴포넌트의 체크박스 항목에 대하여 체크 여부 값을 부모 컴포넌트로 전달
• 부모 컴포넌트는 자식 컴포넌트로부터 전달받은 체크여부 값(True/False)에 맞춰 필요한 작업 진행
  • 부모 컴포넌트 = oppItemManagementEdit.cmp
  • 자식 컴포넌트 = childCmp.cmp

 

 

1. 자식 컴포넌트 - 체크박스 항목에 체크할 시 부모 컴포넌트로 값 전달

• 체크박스 생성 < lightning-input type="checkbox">
• 체크박스 체크 여부 값 관리 <onchange>
• 체크 여부 값을 부모 컴포넌트로 전달 this.dispatchEvent(new CustomEvent())

 

1-1 : 자식컴포넌트 - html 파일

<template>

    <lightning-input

        style="width: 100%;"    

        class="slds-popover slds-popover_edit slds-popover__body "

            type="checkbox"

            data-id="checkbox"

            label="선택된 항목 업데이트"

            onchange={handleCheckboxChange}  

            onclick={handleClick}

    ></lightning-input>

</template>

 

1-2 : 자식컴포넌트 - js 파일

 

import { LightningElement } from 'lwc';

export default class ChildCmp extends LightningElement {

 

    @track isChecked = false;

    handleCheckboxChange(event){

        this.isChecked = event.target.checked;

    }

 

    handleClick(event) {

        this.dispatchEvent(new CustomEvent('checkisinclude', {

            composed: true,

            bubbles: true,

            cancelable: true,

            detail: {

                data: { context: this.context }

            }

        }));

    }

}

 

 

 

 

2. 부모컴포넌트 - 자식 컴포넌트의 커스텀 이벤트 수신하여 필요한 작업 진행

• 자식 쪽에서 발생시킨 커스텀이벤트인 checkisinclude 이벤트를 감지하여
• 부모 쪽의 handleCheckIsInclude 메서드가 실행되도록 바인딩

 

2-1 : 부모 컴포넌트 - html 파일

<template>

        ...다른 코드...

 

        <div>

            <c-child-cmp></c-child-cmp>

        </div>

</template>

 

2-2 : 부모 컴포넌트 - js 파일

 

 

export default class OppItemManagementEdit extends LightningElement {

 

    connectedCallback() {

        //자식 이벤트 수신

        this.template.addEventListener('checkisinclude', this.handleCheckIsInclude.bind(this));

    }

 

   

    // 부모 컴포넌트의 checkisinclude 이벤트 핸들러 

    handleCheckIsInclude(event) {

        const isChecked = event.detail.data.context;

        console.log('handleCheckIsInclude 이벤트 동작 === ' + isChecked);

        if(isChecked){

            //체크하였을 시 필요한 작업

        }else{

        }

    }

 

}