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

文章目录

  • 前言
  • 一、vue2.x 事件总线
  • 二、vue3.x 事件总线
          • 1. 安装第三方库 mitt
          • 2. 注册使用
          • 3. 将事件总线注册到 vue 实例
          • 4. 派发事件的组件
          • 5. 监听事件的组件


前言

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

一、vue2.x 事件总线

vue 组件通信-全局事件总线_第1张图片

$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)
    })
  }
}

你可能感兴趣的:(vue,vue.js,javascript,前端)