티스토리 뷰

반응형

지난 글로 부모-자식 컴포넌트 간의 데이터 전달 방법에 대해 정리했다. 


이번에는 개별의 컴포넌트 사이에서의 데이터 전달(통신) 방법에 대해 정리하겠다. 


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 메소드를 사용하여 이벤트를 호출

이벤트를 처리하는 곳에서는 created 혹은 mounted 시점에 $on 메소드를 사용하여 핸들링한다. 

$emit 메소드는 다음과 같이 생겼다. 

$emit('이벤트 이름',  파라미터1, 파라미터2 ... );

$on 메소드는 다음과 같이 생겼다. 

$on('처리할 이벤트 이름', fuction(이벤트 호출 시 넘긴 파라미터1, 이벤트 호출 시 넘긴 파라미터2 ...) {
// 처리할 내용 (콜백 함수)
});


참으로 간단 ^.~

반응형

'정리하기 > 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
링크
«   2024/11   »
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
글 보관함