1、新建bus.js文件,引入vue,创建一个vue实例,导出这个实例:

import Vue from 'vue';

export default new Vue;

vue组件数据通信--Bus事件总线

2、在需要通信的两个组件中分别引入bus.js

import Bus from '路径';

3、在发送数据的组件中,通过vue实例方法$emit发送事件名称和传递数据。

vue组件数据通信--Bus事件总线

4、接受数据的组件中,通过vue实例方法$on监听到事件和数据。通常挂载到生命周期create和mounted中:

vue组件数据通信--Bus事件总线

 

测试:

vue组件数据通信--Bus事件总线

测试前:

vue组件数据通信--Bus事件总线

测试后(点击bus总线):

vue组件数据通信--Bus事件总线

最后如果需要销毁的话,在vue生命周期beforeDestroy或destroyed中vue实例的$off清除:

beforeDestroy(){

Bus.$off('click')

}

相关文章: