코딩일기/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;
     })
 } 

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

반응형