阅读数:100 评论数:0

一、vue2

eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

1、初始化

// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

2、发送事件

<template>
  <div>
    <show-num-com></show-num-com>
    <addition-num-com></addition-num-com>
  </div>
</template>

<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
  components: { showNumCom, additionNumCom }
}
</script>



// addtionNum.vue 中发送事件

<template>
  <div>
    <button @click="additionHandle">+加法器</button>    
  </div>
</template>

<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {
  data(){
    return{
      num:1
    }
  },

  methods:{
    additionHandle(){
      EventBus.$emit('addition', {
        num:this.num++
      })
    }
  }
}
</script>

3、接收事件

// showNum.vue 中接收事件

<template>
  <div>计算和: {{count}}</div>
</template>

<script>
import { EventBus } from './event-bus.js'
export default {
  data() {
    return {
      count: 0
    }
  },

  mounted() {
    EventBus.$on('addition', param => {
      this.count = this.count + param.num;
    })
  }
}
</script>

4、移除事件监听者

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

二、vue3

vue3.x移除了$on、$off和$once这几个事件 API，但可以使用第三方插件 实现EventBus，这里使用mitt。

1、安装依赖

npm install --save mitt

2、全局声明 main.js

import { createApp } from 'vue'
import mitt from 'mitt'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.Bus = mitt()
app.mount('#app')

3、生成event

<template>
  <button @click="onclick">按钮</button>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount } from 'vue'
// 获取到 全局事件总线
const { Bus }  = getCurrentInstance().appContext.config.globalProperties

const onclick = () => {
  Bus.emit('Event', { a: 'b' })
}
</script>

4、添加监听

Bus.on('Event', (res)=>{
  // res 就是emit传过来的数据
  console.log(res)
})

5、移除监听

Bus.off('Event');

// 清空所有
Bus.all.clear();