vue Study - event bus

event bus : 루트 컴포넌트를 거치지 않고 자식컴포넌트끼리 이벤트를 주고 받아 데이터를 변경할 수 있다.

 

main.js

export const bus = new Vue(); //새로운 객체 생성 - footer와 header에서 사용

 

Header.vue, footer.vue

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

 

Header.vue

this.title='Vue Wizards'; bus.$emit('titleChanged','Vue Wizards');

 

Footer.vue

created(){    bus.$on('titleChanged',(data)=>{       this.title=data;    }) }