코딩일기/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;
})
}
라이프싸이클에 넣은이유는 받아야할 시점에 받아야 하기때문에.. 라이프 싸이클을 이용했다.
반응형