vue中js简单创建一个事件中心/中间件/eventBus

vue中js简单创建一个事件中心/中间件/eventBus

目录结构如下：

eventBus.js

class eventBus {constructor() {this.events = {};}// 监听事件on(event, callback) {if (!this.events[event]) {this.events[event] = [];}this.events[event].push(callback);}// 发射事件emit(event, data) {if (this.events[event]) {this.events[event].forEach((callback) => {callback(data);});}}
}export default new eventBus();

test.vue

<template><div @click="onClick">test_1</div>
</template><script>
import eventBus from '@/tools/eventBus.js'export default {name: 'test_1',methods: {onClick() {eventBus.emit('test', '事件1的参数')eventBus.emit('test2', {name: 'xingyue',age: 18})}}
}
</script><style></style>

App.vue

<template><test />
</template><script>
import test from './view/test.vue'
import eventBus from './tools/eventBus.js'export default {name: 'App',components: {test,},mounted() {this.test();this.test2();},methods: {test() {eventBus.on('test', (data) => {console.log('首页接收test：', data)})},test2() {eventBus.on('test2', (e) => {console.log('首页接收test2：', e)} )}}
}
</script><style></style>

点击触发事件后在app.vue中接收到事件。