小型vue项目中非父子组件通信eventBus

vue小型项目进行组件交互时,可以选择eventBus通讯。
定义一个vue对象作为eventBus,让其代为订阅发布事件,进行通讯。

1.定义eventbus文件

import Vue from 'vue';  
export default new Vue(); 

引用eventBus

import eventBus from './js/bus.js'; 

2.发布(声明/监听)事件

created() {  
    eventBus.$on('getTarget', target => {  
        console.log(target);  
    });  
}  

3.订阅(触发)事件

methods: {  
   addCart(event) {  
       eventBus.$emit('getTarget', event.target);   
   }  
}  

 

 

你可能感兴趣的:(Vue,vue,非父子组件通信,eventbus)