前言

上一篇文章寫了 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.

三、使用全局事件總線

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})},// 刪除一個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. 檢查輸入合法性const title = this.title.trim()if (!title) {alert('請輸入內容')return}const id = uuidv4()// 2. 根據輸入生成一個todo對象const todo = { id, title, done: false }// 3. 添加到todosthis.$bus.$emit('addTodo', todo)// 4. 清除輸入this.title = ''}} }

注意：最后在beforeDestory鉤子中，用$off去解綁當前組件所用到的事件。

如下圖：

解綁有多種方式，$off() 不寫參數，是直接解綁全部

一個參數$off('xxx')是解綁一個，解綁多個可以寫成$off(['xx','xxx'])

后語

大家一起加油！！！如若文章中有不足之處，請大家及時指出，在此鄭重感謝。

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見時，都已有所成。

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。