하위에서 상위 컴포넌트로 이벤트 전달하기

이전 포스팅에서 props에대해 알아보았다.

props는 상위에서 하위 컴포넌트로 데이터를 전달 하는 방식이다.

이번엔 그 반대로 하위컴포넌트에서 상위 컴포넌트로의 통신에대해

알아보자. 먼저 하위에서 상위로 통신을 하기위해선

이벤트를 발생시켜 상위 컴포넌트에 신호를 보내는 방법이 있다.

상위 컴포넌트에서 하위컴포넌트의 특정 이벤트가 발생하기를 기다리다가

하위 컴포넌트에서 특정 이벤트가 발생되면 상위 컴포넌트에서

해당 이벤트를 수신해서 상위 컴포넌트의 메소드를 호출하면 된다.

먼저 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용한다.

각각의 형식은 아래와 같다.

$emit()을 사용하게되면 괄호 안의 이벤트가 발생된다.

(보통 $emit()을 호출하는 위치는 하위컴포넌트의 특정 메소드 내부)

따라서 $emit()을 호출할 때 사용되는 this는 하위 컴포넌트를 타겟으로 잡는다.

호출한 이벤트는 하위 컴포넌트를 등록하는 상위컴포넌트의 template

속성에서 v-on: 으로 받는다. 하위 컴포넌트에서 발생한 이벤트를

v-on:속성에 설정하고 속성의 값에 이벤트가 발생했을때 호출될 상위

컴포넌트의 메소드를 설정한다.

다음 소스를 보자.

 위 소스는 child-component의 show 버튼을 누르면 이벤트가 발생되고

발생한 이벤트로 상위컴포넌트의 printText()메소드를 실행시키는 것이다.

먼저 위소스의 실행 순서는 show 버튼을 클릭하면 클릭이벤트

v-on:click="showLog"에 따라서 showLog()메소드가 실행된다.

다음 showLog()메소드 안에 this.$emit('show-log')가 실행되면서

show-log이벤트가 발생된다. show-log이벤트는 

<child-component>에 정의한 v-on:show-log에 전달되고,

v-on:show-log의 대상 메소드인 최상위 컴포넌트 메소드인 printText()가 실행된다.

printText()는 received~~라는 로그를 출력하는 메소드로 콘솔창에 로그가 출력된다.

먼저 위소스를 실행시킨후 크롬에서 F12를 눌러 개발자 도구를 실행시키자.

화면에 show를 클릭하면 개발자도구 콘솔창에서

received an event 라는 로그와 왼쪽에 이벤스 발생횟수를

확인할 수 있다. 위와 같은 방식으로

하위 컴포넌트에서 상위 컴포넌트로 신호를 보내 상위 컴포넌트의

메소드를 실행 시킬수 있고 하위 컴포넌트로 내려보내는 props의 값을

설정할수도 있다.