【Vue | 补洞 | 04】全局事件总线

波吉

已于 2022-03-15 13:49:15 修改

阅读量1.2k

点赞数

分类专栏：前端 Vue补洞

于 2022-03-14 21:00:13 首次发布

本文链接：https://blog.csdn.net/weixin_42678675/article/details/123488315

版权

71 篇文章 4 订阅

订阅专栏

22 篇文章 3 订阅

订阅专栏

注册一个 $bus，使用 全局事件总线 实现任意组件间通信！除了 Vuex，本文的 全局事件总线 是实现组件间通信的第二种方式。

欢迎持续关注新系列文章 [Vue 补洞] 系列，用久了 Vue2 总有一些遗漏的知识点，一起通过该系列文章一起查漏补缺！

用于任意组件间通信

举个简单的例子：原本不认识的两个小年轻，通过媒婆建立起联系，在还没有互加联系方式的情况下，双方要互通消息只能借助媒婆。而媒婆之所以能当媒婆，其前提条件是：男女双方都认识媒婆。这在全局事件总线中，也是类似的情况。

非父子组件，跨多级进行数据或事件的传递

所有组件都能访问到该实例上的方法（因此需要将该"媒婆"挂载到 根实例vm 上，其所有子组件就都能访问了）
能调用到 $on $off $emit （这些方法都在Vue原型链上，因此"媒婆"得是 Vue的实例对象，要么是 vm，要么是 VueComponent）

为何要将 $bus 绑定在 beforeCreated 中？

beforeCreated 时还未对数据监测、数据代理等进行挂载，

等到创建组件时，在 mounted 中调用了 this.$bus.$on 绑定事件，这时 $bus 已经存在且可以使用了

// main.js
import Vue from 'vue'
...
new Vue({
    ...
    beforeCreated() {
    	Vue.prototype.$bus = this
	}
})

假设：A组件想接收数据，而B组件会触发事件 getName 并传递数据给A，则需要在A组件身上使用 $on 绑定自定义事件，如下：

// A.vue
mounted() {
    this.$bus.$on('getName', (value)=>{
		console.log(value)
    })
}

在B组件中，通过 $emit 就可以触发在A身上的 getName 事件，并将 name 的值传给A组件

// B.vue
methods: {
    xxxx() {
        let name = 'Jokerls'
        this.$bus.$emit('getName', name)
    }
}

最好在组件销毁时，把组件身上 $on 的事件给解绑。（因为 $bus 会一直存在，若不解绑，则会一直占用着总线上的某个方法，导致别的组件 调用同名方法时，会出现冲突）

注意 不能使用 this.$off() 全部解绑，会导致别人在 $bus 身上注册的方法失效。

// A.vue
mounted() {
    this.$bus.$on('getName', (value)=>{
		console.log(value)
    })
},
beforeDestroy() {
	this.$off('getName')
}

关注

专栏目录