보안 전공생의 공부

이벤트 버스 - 관계 없는 컴포넌트 간 통신 본문

WEB/Vue

이벤트 버스 - 관계 없는 컴포넌트 간 통신

수잉 2021. 2. 27. 16:36

(출처 : wiki.plateer.com/pages/viewpage.action?pageId=8553499)

 

 

하위 컴포넌트 D에서 상위 컴포넌트 A로 통신을 위해

<하위 컴포넌트 D -> 상위 컴포넌트 B -> 최상위 컴포넌트 -> 상위 컴포넌트 A>경로를 이용할 수 있지만,

이는 필요없는 상위 컴포넌트를 필요로 한다.

 

이러한 점을 보완하기 위한 방법으로 이벤트 버스를 이용한다.

 

var eventBus = new Vue();

Vue 인스턴스를 생성하고, 이를 이용해 컴포넌트 간 통신 매개체로 쓴다.

 

 

- 데이터를 전달하는 컴포넌트에서 eventBus.$emit 사용

method: {
	메소드명: function(){
    	eventBus.$emit('이벤트명',데이터,...);
	}
}

 

- 데이터를 전달받는 컴포넌트에서 eventBus.$on 사용 -> 전달된 데이터를 function에서 사용가능

method: {
	메소드명2: function(){
    	eventBus.$on('이벤트명', function(value,...){
        	...
        });
	}
}

 

[예제]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <component1></component1>
        <component2></component2>
    </div>
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script>
    var eventBus = new Vue();
 
 Vue.component('component1', {
     template: '<div>컴포넌트1 영역<button v-on:click="showLog">100증가</button></div>',
     methods: {
         showLog: function() {
         eventBus.$emit('triggerEventBus', 100);
         }
     }
 });
  
 Vue.component('component2', {
     template: '<div>컴포넌트2 영역 / 전달받은 값 : {{ number }}</div>',
     created: function() {
         var self = this;
         eventBus.$on('triggerEventBus', function(value){
         self.number += value;
         });
     },
     data: function() {
         return {
         number : 0
         }
     }
 });
  
 var app = new Vue({
     el: '#app'
 });
    </script>
</body>
</html>

컴포넌트 1에서 컴포넌트2의 created function을 통해 data를 조작한다.

component1의 [100증가] 버튼을 누르면

component2의 전달받은 값이 0->100으로 증가했다.

 

서로 상하관계가 아닌 컴포넌트끼리 통신이 가능하다는 것을 확인할 수 있다 !

'WEB > Vue' 카테고리의 다른 글

Materialize 설치, 사용 방법  (0) 2021.05.03
슬롯(slot)  (0) 2021.03.15
컴포넌트 정의 및 등록 / 컴포넌트 간의 통신  (0) 2021.01.27
디렉터리 | 이벤트 처리 : v-on  (0) 2021.01.27
디렉티브 | v-for, v-bind, v-model  (0) 2021.01.18
'WEB/Vue' Related Articles more
Comments