vue 다른 컴포넌트 끼리의 통신처리

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

 

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 ...) {

// 처리할 내용 (콜백 함수)

});