반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- webpack
- 댓글달기
- v-html
- scss
- Vue.js
- 리액트
- TypeScript
- State
- Wecode
- CSS
- nodejs
- express
- sass
- Vue transition
- jsx
- Vue
- 자료구조
- vuex
- mapGetters
- HOC
- react
- 자바스크립트
- event
- input
- MySQL
- JavaScript
- ES6
- storybook
- App.vue
- 쉬운설명
Archives
- Today
- Total
익명의 개발노트
[vue] event-bus 본문
반응형
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