[vue] $emit 이벤트 발생과 수신 (하위에서 상위 컴포넌트로 이벤트 전달)

event emit : 이벤트를 발생(emit)시켜 상위 컴포넌트에 신호를 보낸면 된다.

 

상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것.

 

이벤트 발생과 수신 형식

$emit()과 v-on: 속성을 사용하여 구현

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

 

//이벤트 발생
this.$emit('이벤트명'); //this는 하위 컴포넌트를 가리킴

호출한 이벤트는 하위 컴포넌트를 등록하는 태그(상위 컴포넌트의 template 속성에 위치)에서 v-on:으로 받음. 

//이벤트 수신
<child-component v-on:이벤트명="상위컴포넌트의 메서드명"> </child component>