Global and Local components and EventBus - Vue

Vue components

Global or Local Component register

1. 전역 컴포넌트의 등록

Vue.component('global-component', {
    //컴포넌트의 구성 내용
    template: "",
    ...
})

2. 지역 컴포넌트의 등록

let comp = {
    //컴포넌트의 구성 내용
    template: "";
    ...
}

new Vue({
    components: {
        "my-comp": comp
    }
})

Event Bus

상하위 관계가 아닌 컴포넌트 간 통신을 위해서 사용할 수 있다.
Event Bus를 사용하기 위해서는 새로운 뷰 인스턴스를 생성할 때 아래와 같이 한다.
socket.io 사용을 해보았다면 이해가 빠를 것이다.

Event Bus는 실제로 보여줄 화면과는 관계 없는 별도의 인스턴스를 생성하여 활용한다!

// eventBus를 사용하기 위하여 생성하는 인스턴스
let eventBus = new Vue();

// 화면을 띄워줄 때 사용할 인스턴스
new Vue({
    ...
})

$emit() & $on()

• $emit() : 이벤트를 발생시킬 컴포넌트에서 사용
• $on() : 이벤트를 받을 컴포넌트에서 수신 시 사용, 일반적으로 라이프사이클 훅에서 수신한다.

1. $emit()

   eventBus.$emit('eventName', 'Hi!')
   

//on
new Vue({
    created: funciton() {
        eventBus.$on(''eventName', function(data) {
            console.log(data)
            //Hi!
        })
    }
})

만약 eventBus의 콜백 함수 안에서 해당 컴포넌트의 메소드를 참고하려면 vm을 사용한다.

new Vue({
    methods: {
        callMethod() {
            ...
        }
    },
    created() {
        let vm = this;
        eventBus.$on('event', function(data) {
            console.log(this)    //여기서의 this는 이벤트 버스용 vue 인스턴스를 가리킨다.
            vm.callMethod()        //vm은 현재 뷰 모델인 인스턴스를 가리킨다.
        })
    }
})