“后端朋友来学前端。”Vue中全局事件总线（GlobalEventBus）的原理和探索过程我在上篇文章埋下了一个小小的伏笔。如下图所示：前面说了，如果我们在Vue中使用(@orv-on)给组件绑定一个自定义事件，其实质就是给子组件VueComponent也就是vc绑定一个事件，然后子组件通过this.$emit()被触发，父组件监听然后执行回调方法。这只适用于父子组件之间的通信。对于兄弟组件，还是不能很方便的进行通信。全局事件总线是什么样的？1.全局事件总线前面提供了一个思路：其他组件也是如此。那么在这一点上，我们需要明白一件事，全局的事件总线，全局这个词，意思就是可以全局访问。并能够绑定方法？即xxxx保证必须有$on、$off、$emit等方法才能实现组件间的通信。那么只有在哪里？？之前我们给子组件绑定自定义事件的时候，其实质就是给子组件的实例对象newVueComponent绑定一个自定义事件。在这个全局事件总线中，我们不能再将自定义事件绑定到每个组件的实例对象上，而是将自定义事件绑定到一个所有组件都可以访问的对象上。这样每个人都可以访问该对象？看下面的图片。---图：来自尚硅谷-张天宇老师我们把它放在Vue原型上，那么全局事件总线就可以实现任意组件之间的通信。2.安装全局事件总线。我们已经弄清楚了去给谁，所以我们必须定义它，否则如何使用它。标准定义如下：importVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=false//全局总线的使用说明//使用全局总线时，一个更好的应用程序处于兄弟组件、祖孙组件之间，这些组件无法直接通信。使用全局事件总线会方便很多。newVue({render:h=>h(App),//beforeCreatelifebeforedatamountPeriodicfunctionbeforeCreate(){//安装全局事件总线$bus是当前应用的vm这里这是当前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',data)方法：{add(){//1.检查输入合法性consttitle=this.title.trim()if(!title){alert('Pleaseentercontent')return}constid=uuidv4()//2.根据输入生成todo对象consttodo={id,title,done:false}//3.加入todosthis.$bus.$emit('addTodo',todo)//4.清空输入this.title=''}}}注：最后在beforeDestoryhook中，使用$off解绑当前组件使用的事件如图下图：解绑有很多种，$off()不写参数，直接解绑所有参数$off('xxx')解绑一个，解绑多个可以写成$off(['xx','xxx'])一起努力吧！！！文中如有不足之处，请及时指出，在此表示衷心的感谢。纸上谈兵的成果总是肤浅的，我知道这件事必须要做。大家好，我是博主宁在淳：一个热爱文艺却走上编程道路的首页青年。希望：当我们相遇时，我们将有所成就。
