[ Vue.js 2 프로그래밍 ]
(http://book.naver.com/bookdb/book_detail.nhn?bid=12320270)
8. 사용자 정의 이벤트
때때로 사용자 정의 이벤트가 필요할 때가 있습니다. 이를 위해 vue 인스턴스 메서드를 사용할 수 있습니다. 모든 vue 인스턴스는 이벤트 인터페이스를 구현하고 있습니다.
Vue 이벤트 인터페이스
(https://kr.vuejs.org/v2/api/index.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8)
이는 다음을 의미합니다.
- $on(event)를 이용해 이벤트 청취
- $emit(event)를 이용해 이벤트 발생
- $once(event)를 이용해 이벤트를 한번만 청취
- $off(event)를 이용해 이벤트 리스너를 제거
8.1 발생과 정취
예제
위 예제에서 리스너를 created라는 생명주기 훅(lifecycle hook)내에 등록합니다. this는 vote 메서드와 created 훅 내에서 vue 인스턴스에 바인딩 돼 있습니다. 그래서 this.$on과 this.$emit을 사용해 $on과 $emit함수에 접근할 수 있습니다.
생명주기 훅(Lifecycle hook)
생명주기 훅(라이프사이클 훅)은 Vue관련 이벤트가 발생할 때 실행되는 함수 입니다.
8.2 부모-자식 간 통신
부모 컴포넌트가 자식 컴포넌트의 이벤트를 청취할 필요가 있을 때는 상황이 약간 달라집니다. this가 각기 다른 인스턴스에 바인딩될 것이기 때문에 this.$on / this.$emit을 사용할 수 없습니다.
부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 곧바로 v-on을 사용해서 자식 컴포넌트에 발생한 이벤트를 직접 청취할 수 있습니다.
위 예제에서 @voted=”countVote”는 자식(food)의 ‘voted’이벤트가 발생할 때 countVote 메서드가 실행된다는 것을 의미합니다.
8.3 인자 전달
이번 예제에서는 각 인스턴스마다 투표 수를 가질 것이며 음식이 투표를 받으면 투표 수가 증가하고, 부모 컴포넌트에도 있는 총 투표 수를 갱신하기 위한 이벤트가 발생할 것입니다.
항목별 득표 수
로그 추가