「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程「后端小伙伴来学前端了」V

前言上一篇文章写了 Vue 中的自定义事件，自定义事件是全局事件总线基础。我在上一篇文章中埋下了一个小小的伏笔。如下图：

文章图片

我说过，在Vue中如果我们用（@orv-on ）给组件绑定上一个自定义事件，其本质就是给子组件VueComponent即vc绑定一个事件，然后子组件通过this.$emit()触发，父组件监听到再执行回调方法。这种也只适合于父子组件之间通信，对于兄弟组件来说，仍然无法非常方便的通信。
那全局事件总线是什么样的呢？
一、全局事件总线前述提供一个思考方向：

文章图片

其他组件同样如此。
那么到这一步，我们要明白一件事情哈，全局事件总线，全局两个字，意思是在全局都能够访问到。并且能够绑定方法呢？
即xxxx中保证要能够有$on、$off、$emit这些方法，才能够实现组件间通信。
那么只有哪里有？？
我们之前给子组件绑定自定义事件的时候，其本质是不是给子组件的实例对象new VueComponent绑定上一个自定义事件。
在这个全局事件总线中，我们就不能再给每个组件的实例对象来绑定自定义事件了，而是要将自定义事件绑定到一个全部组件都能够访问的对象上。
那么那个对象大家都能够访问？看下图吧。

文章图片

---图：来自于尚硅谷-张天宇老师
我们将它放在vue原型上，那么全局事件总线就能够做到任意间组件通信拉。
二、安装全局事件总线我们弄明白要去找谁了，就要将它定义出来，不然怎么用啊。
标准定义如下：

import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = false// 关于全局总线的使用说明 // 使用全局总线的时候，更好的应用是在兄弟组件、祖孙组件之间，这些组件他们并不能做到直接通信，这个使用全局事件总线会方便很多 new Vue({ render: h => h(App), // beforeCreate 位于数据挂载之前的生命周期函数 beforeCreate () { // 安装全局事件总线$bus就是当前应用的vm这里的this就是当前的new Vue() Vue.prototype.$bus = this } }).$mount('#app')

beforCreate()方法
是众多生命周期中最前面的一个。在此时，它的this就是当前的vue.

「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程

文章图片

三、使用全局事件总线 1、接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。即是图示中的第一步。

// 回车增加一个todo addTodo (todo) { this.todos.unshift(todo) }, // 判断勾选不勾选 checkTodo (id) { this.todos.forEach((todo) => { if (todo.id === id) todo.done = !todo.done }) }, // 删除一个todo deleteTodo (id) { this.todos = this.todos.filter(todo => todo.id !== id) }, // 全选全不选 checkAllTodos (done) { this.todos.forEach((todo) => { todo.done = done }) }, // 清除所有已完成的任务 clearDoneTodos () { this.todos = this.todos.filter(todo => !todo.done) } }, // 在加载完成后就进行全局总线的绑定 mounted () { this.$bus.$on('addTodo', this.addTodo) this.$bus.$on('checkTodo', this.checkTodo) this.$bus.$on('deleteTodo', this.deleteTodo) },

2、提供数据：this.$bus.$emit('xxxx',数据)

methods: { add () { // 1. 检查输入合法性 const title = this.title.trim() if (!title) { alert('请输入内容') return } const id = uuidv4() // 2. 根据输入生成一个todo对象 const todo = { id, title, done: false } // 3. 添加到todos this.$bus.$emit('addTodo', todo) // 4. 清除输入 this.title = '' } } }

注意：最后在beforeDestory钩子中，用$off去解绑当前组件所用到的事件。
如下图：