当前位置：首页 > article >正文

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

article 2025/3/20 2:55:52

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>