vue 组件通信-全局事件总线

---

前言

全局事件总线：任意组件间通信。

一、vue2.x 事件总线

$bus 所有组件都能看的到，所有的vc、vm都能看得到

// main.js
new Vue({
	el: '#app',
  render: h => (App),
  beforeCreated() {
  	// 安装全局事件总线,$bus就是当前应用的vm
    Vue.prototype.$bus = this
  }
})

School.vue组件—接收数据

 方式1: 
mounted() {
	this.$bus.$on('hello', (data) => {
  	console.log('可以收到数据', data)
  })
},
beforeDestroy() {
	//组件卸载之前,解绑事件总线事件
  this.$bus.$off('hello')
}
 方式2:
methods: {
	hello() {}
},
mounted() {
	this.$bus.$on('hello', this.hello)  	
},
beforeDestroy() {
	this.$bus.$off('hello')
}

Student.vue组件—提供数据

mounted() {
	this.$bus.$emit('hello', 666)
}

二、vue3.x 事件总线

vue3.x 以后从实例中移除了 on，off 和 once方法，emit 仍然是现有 API 的一部分，只能实现子组件触发父组件的方法

解决方案:

1. 安装第三方库 mitt

npm install --save mitt
或者
yarn add mitt -S

2. 注册使用

// 创建一个 eventHub.js 文件
import Mitt from 'mitt'

const eventHub = new Mitt()

eventHub.$on = eventHub.on
eventHub.$off = eventHub.off
eventHub.$emit = eventHub.emit

export default eventHub

3. 将事件总线注册到 vue 实例

// 在 main.js 中
import { createApp } from 'vue'
import App from './App.vue'
import eventHub from '@/plugins/eventHub.js'

const app = createApp(App)

// 配置全局事件总线
app.config.globalProperties.eventHub = eventHub

app.mount('#app')

4. 派发事件的组件

import { getCurrentInstance, onMounted } from 'vue'

export default {
	name: '',
  setup() {
  	const { eventHub } = getCurrentInstance().proxy
    
    onMounted(() => {
    	eventHub.$emit('event-name', 'some params')
    })
  }
}

5. 监听事件的组件

import { getCurrentInstance, onBeforeUnmount } from 'vue'

export default {
	name: '',
  setup() {
  	const eventHandler = async (params) => {
    	// some async process
    }
    
    const { eventHub } = getCurrentInstance().proxy
    eventHub.$on('event-name', eventHandler)
    
    onBeforeUnmount(() => {
    	eventHub.$off('event-name', eventHandler)
    })
  }
}