bus的使用方法

1、在js文件中定义一个中央事件总线BUS，并暴露出来。

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2、在文件A(传递数据)和文件B（接收数据）中引入bus。

import Bus from '@/js/bus';

3、在文件A中放入数据，在文件B中取出数据。

    beforeDestroy() {
            //如果添加成功，则跳转到成功页面，并将添加的用户ID传过去
            //此处传刚注册用户返回的用户ID
            Bus.$emit('staffInfo', this.terminalInfo);
            console.log('A beforedestroy 销毁前状态================》');
        },

    created() {
            Bus.$on('staffInfo', (msg) => {
                console.log('successTerminal页面接收-', msg);
                if(msg.role == 'terminal') {
                    this.info.terminalRole = '哑终端';
                    this.info.terminalType = msg.terminalType;
                    this.info.mac = msg.newMac;
                    this.info.office = msg.selectOne + msg.selectTwo + msg.selectThree + msg.selectFour;
                    this.info.workingPlace = msg.workingPlace;
                    this.info.introducer = msg.introducer;
                    this.info.valideTime = '永久';
                    this.info.registerTime = msg.registerTime;
                }
            })
            console.log('%c%s',
                'background: yellow;',
                ' B created 创建完成状态===============》');
        },

4、注意事项：文件A中on应该写在created钩子函数中。这和vue的生命周期有关。
当跳转到文件B对应的页面后，如果刷新B页面，页面的数据会清空。
5、结合实例介绍vue的生命周期。
当加载A页面时，钩子函数执行过程如下：

image.png

当点击注册，跳转到B页面时，钩子函数执行过程如下：

image.png

A页面先destoryed然后才是B页面的mounted。所以将Bus.$on()放在mounted函数中是取不到数据的。
当点击浏览器的返回按钮时，B页面完成了beforeDestory和destory方法。