Event Bus

2019. 3. 12. 18:26Programming/Vue.js


Event Bus? 그게 뭐야?????


: 컴포넌트 간의 관계가 없더라도, 컴포넌트 간의 통신을 할 수 있는 것!!!





Event Bus의 장/단점


장점 : 컴포넌트 기본적인 통신(상.하위 관계를 가지고. 그 안에서만 데이터를 주고 받을 수 있다는 그런 기본적인 규칙...)을 지키지 않아도 됨


단점 : 컴포넌트 관계가 명확해지지 않음. 다시 말해서, 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않음.





이벤트 발생


 

 import { eventBus } from '.../.../main';

 eventBus.$emit('refresh', 10);



: 이벤트를 발생시킬 컴포넌트에 eventBus import 후 $.emit으로 이벤트를 발생




이벤트 수신


 

 import { eventBus } from '.../.../main';

 

 created() {

    eventBus.$.on('refresh', function (data) {

         console.log(data);

    });

 }



: 해당 이벤트를 받을 컴포넌트에도 동일하게 import한 후 콜백으로 이벤트 수신.







'Programming > Vue.js' 카테고리의 다른 글

[퀴즈] Component-props-for 퀴즈 풀이  (0) 2019.03.25
[퀴즈] Component-props-for 퀴즈  (0) 2019.03.13
같은 레벨의 컴포넌트 간 통신  (0) 2019.03.11
[퀴즈] Props 퀴즈 풀이  (0) 2019.03.08
[퀴즈] props Quiz  (0) 2019.03.07