前言
上一篇文章写了 Vue 中的自定义事件，自定义事件是全局事件总线基础。我在上一篇文章中埋下了一个小小的伏笔。如下图：
我说过，在Vue中如果我们用（@orv-on）给组件绑定上一个自定义事件，其本质就是给子组件VueComponent即vc绑定一个事件，然后子组件通过this.$emit()触发，父组件监听到再执行回调方法。这种也只适合于父子组件之间通信，对于兄弟组件来说，仍然无法非常方便的通信。
那全局事件总线是什么样的呢？
一、全局事件总线前述
提供一个思考方向：
其他组件同样如此。
那么到这一步，我们要明白一件事情哈，全局事件总线，全局两个字，意思是在全局都能够访问到。并且能够绑定方法呢？
即xxxx中保证要能够有$on、$off、$emit这些方法，才能够实现组件间通信。
那么只有哪里有？？
我们之前给子组件绑定自定义事件的时候，其本质是不是给子组件的实例对象new VueComponent绑定上一个自定义事件。
在这个全局事件总线中，我们就不能再给每个组件的实例对象来绑定自定义事件了，而是要将自定义事件绑定到一个全部组件都能够访问的对象上。
那么那个对象大家都能够访问？看下图吧。
---图：来自于尚硅谷-张天宇老师
我们将它放在vue原型上，那么全局事件总线就能够做到任意间组件通信拉。
二、安装全局事件总线
我们弄明白要去找谁了，就要将它定义出来，不然怎么用啊。
标准定义如下：
importVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=false//关于全局总线的使用说明//使用全局总线的时候，更好的应用是在兄弟组件、祖孙组件之间，这些组件他们并不能做到直接通信，这个使用全局事件总线会方便很多newVue({render:h=>h(App),//beforeCreate位于数据挂载之前的生命周期函数beforeCreate(){//安装全局事件总线$bus就是当前应用的vm这里的this就是当前的newVue()Vue.prototype.$bus=this}}).$mount('#app')beforCreate()方法
是众多生命周期中最前面的一个。在此时，它的this就是当前的vue.
三、使用全局事件总线
1、接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。即是图示中的第一步。
//回车增加一个todoaddTodo(todo){this.todos.unshift(todo)},//判断勾选不勾选checkTodo(id){this.todos.forEach((todo)=>{if(todo.id===id)todo.done=!todo.done})},//删除一个tododeleteTodo(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.检查输入合法性consttitle=this.title.trim()if(!title){alert('请输入内容')return}constid=uuidv4()//2.根据输入生成一个todo对象consttodo={id,title,done:false}//3.添加到todosthis.$bus.$emit('addTodo',todo)//4.清除输入this.title=''}}}注意：最后在beforeDestory钩子中，用$off去解绑当前组件所用到的事件。
如下图：
解绑有多种方式，$off() 不写参数，是直接解绑全部
一个参数$off('xxx')是解绑一个，解绑多个可以写成$off(['xx','xxx'])
后语
大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感谢。
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春。一名喜欢文艺却踏上编程这条道路的小青年。
希望：
我们，待别日相见时，都已有所成。