익명의 개발노트

[vue] event-bus 본문

코딩일기/TIL

[vue] event-bus

캡틴.JS 2019. 10. 1. 21:13
반응형

1. 형제 컴포넌트간에 데이터를 전달하고 싶을때, 이벤트 버스를 사용한다.

   유지보수성을 위해서 이벤트 버스를 util 폴더에다가 하나의 js파일로 생성해서 필요할때 마다 import해서 사용한다.

//EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

이벤트를 전달하고자하는 쪽, 받는쪽 둘다 이벤트 버스를 사용하며,

전달하고자하는 쪽은 EventBus.$emit('이벤트명', 전달하고자 하는값)

받는 쪽은 EventBus.$on('이벤트명', 콜백함수에 받고자하는 값 인자로 넣기)

사용하면 된다.

보내는 쪽
 EventBus.$emit('value',this.marketPrice.formattedPrice);
 
받는 쪽
 beforeUpdate(){
 	 EventBus.$on('value',(payload)=>{
        this.sourceCurrencyValue = payload;
     })
 } 

라이프싸이클에 넣은이유는 받아야할 시점에 받아야 하기때문에.. 라이프 싸이클을 이용했다.

반응형

'코딩일기 > TIL' 카테고리의 다른 글

[Sonar Qube] 환경설정  (0) 2019.10.07
[react] context API사용하기.  (0) 2019.10.06
browser history API  (0) 2019.09.30
[react] css 작성방법 결정  (0) 2019.09.30
[vue] image import error처리, 멀티 버튼 이벤트 처리  (0) 2019.09.25
Comments