티스토리 뷰
지난 글로 부모-자식 컴포넌트 간의 데이터 전달 방법에 대해 정리했다.
이번에는 개별의 컴포넌트 사이에서의 데이터 전달(통신) 방법에 대해 정리하겠다.
Vue는 자체적으로 이벤트와 관련된 $emit, $on 메소드를 갖고 있어,
보통 EventBus라는 이름의 Vue 객체 생성 후 해당 객체를 사용하여 서로 통신을 한다.
예제를 보자.
다음은 EventBus 생성 파일이다.
- EventBus.js
import Vue from 'vue';
export const BUS = new Vue();
다음은 이벤트 호출/처리할 컴포넌트 선언 파일이다.
- One.vue (이벤트 호출 컴포넌트)
import { BUS } from './EventBus';
export default {
name: 'One',
mounted() {
BUS.$emit('bus:call');
}
}
- TheOther.vue (이벤트 핸들링 컴포넌트)
import { BUS } from './EventBus';
export default {
name: 'One',
mounted() {
BUS.$on('bus:call', function() {
console.log('bus:call 호출');
})
}
}
위의 코드와 같이
이벤트를 호출/처리할 vue 컴포넌트 내부에 앞서 생성한 EventBus.js 파일을 import 한다.
이벤트 호출하는 곳에서는 원하는 시점에 $emit 메소드를 사용하여 이벤트를 호출
참으로 간단 ^.~
'정리하기 > vue.js' 카테고리의 다른 글
vue 기반 외부 라이브러리 모음 (0) | 2018.05.16 |
---|---|
vue 디버깅 툴 (0) | 2018.05.16 |
vue 컴포넌트 상속 (0) | 2018.05.16 |
vue 컴포넌트 라이프사이클 (feat.nextTick) (0) | 2018.05.16 |
vue 선언 내부 살펴보기 (0) | 2018.05.16 |
- Total
- Today
- Yesterday
- git tag
- javascript
- 외부모듈
- 함수
- #가상머신
- framework
- backbone.js
- nextTick
- js
- vue
- AndroidContext
- mocha.js
- marionetts.js
- eventbus
- MarionetteJS
- awe-some
- node
- Typescript
- browserify
- 자바스크립트
- vue.js
- common.js
- awesome-vue
- node.js
- 뉴욕
- vuex
- angular
- nodejs
- 원하는것이있다면끝까지버텨라
- Android
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |