event bus

event bus

https://ryuzuka.github.io/VUE/tutorial/10_eventBus.html

비어있는 Vue 인스턴스를 이벤트 버스로 이용해 컴포넌트 간 통신 가능( $emit, $on )

<div id="app">

<div>

<button-component></button-component>

<text-component></text-component>

</div>

</div>

<script>

let eventBus = new Vue(); // 빈 Vue 인스턴스 생성

Vue.component( 'button-component', {

template: '<button @click="clickButton">button-component</button>',

methods: {

clickButton () {

eventBus.$emit( 'component-event', '비 부모-자식간 컴포넌트 통신' );

}

}

});

Vue.component( 'text-component', {

template: '<span>{{ text }}</span>',

data: function () {

return { text: '' };

},

mounted: function () {

eventBus.$on( 'component-event', function ( text ) {

this.text = text;

}.bind( this ));

}

});

new Vue({

el: '#app',

});

</script>