VUE项目全局事件总线

最近遇到个需求，就是要在vue项目中暴露一个方法供其他端调用给我们传输数据，然后用接收到的这个数据去改变我们的页面。这一下子就从主动更新页面变成被动更新页面了，话不多说上核心代码！

1.创建一个event.js文件

写入：

//此处存放事件

let events = {};

//设置监听事件

export function on(name, self, callback) {

    let tuple = [self, callback];

    events[name] = [tuple];

}

//调用监听事件

export function emit(name, data) {

    let callbacks = events[name];

    if (Array.isArray(callbacks)) {

        callbacks.map((tuple) => {

            let self = tuple[0];

            let callback = tuple[1];

            callback.call(self, data);

        })

    }

}

//移出正在监听的事件

export function remove(name, self) {

    let callbacks = events[name];

    if (Array.isArray(callbacks)) {

        events[name] = callbacks.filter((tuple) => {

            return tuple[0] != self;

        })

    }

}

2.在main.js中注册成全局方法

//根据自己的目录自行更改

import {

    on,

    remove,

    emit

} from '@/utils/event.js'

Vue.prototype.$onEvent = on;o

Vue.prototype.$removeEvent = remove;

Vue.prototype.$emitEvent = emit;

3.在页面的mounted钩子中注册监听事件

mounted(){

        //data是触发调用时传递的数据

        this.$onEvent ('eventName',this,function(data){

                //do something

                console.log(data)

        })

}        

4.调用全局监听的eventName事件

//调用的事件名要和监听的事件名一致，data为需要传输的数据

this.$emitEvent('eventName',data);

5.移除监听事件

//如果离开页面时不需要监听可以移除掉，在页面销毁时的钩子调用

this.$removeEvent('eventName',this)

新人小白一枚，欢迎指点