1、新建bus.js文件,引入vue,创建一个vue实例,导出这个实例:
import Vue from 'vue';
export default new Vue;
2、在需要通信的两个组件中分别引入bus.js
import Bus from '路径';
3、在发送数据的组件中,通过vue实例方法$emit发送事件名称和传递数据。
4、接受数据的组件中,通过vue实例方法$on监听到事件和数据。通常挂载到生命周期create和mounted中:
测试:
测试前:
测试后(点击bus总线):
最后如果需要销毁的话,在vue生命周期beforeDestroy或destroyed中vue实例的$off清除:
beforeDestroy(){
Bus.$off('click')
}