月亮啊月亮

你能照見南邊，也能照見北邊

照見她，你跟她說一聲，就說我想她了。

前言

前一篇文章寫了 vue 中利用 Props 實現組件之間的通信，那種方式是最簡單也是最基礎的組件之間的通信方式。父組件通過 props 向下傳數據給子組件，當子組件有事情告訴父組件時會通過$emit事件告訴父組件。對于父子組件，這種傳遞方式，是較為方便且實用的，但是對于祖孫組件或者兄弟組件，就顯得不那么友善了。

---

在Vue本身的生態中，也有一個獨立的Vuex庫用來處理組件之間的通訊，但很多時候，咱們并不需要動用類似Vuex這種大殺招，而可以考慮更簡單的 Vue 中的事件總線，即EventBus。

在這提出一個簡單的思考:

一旦當你看到項目中,某段代碼或者是要點很多下才能出來的變量,再或者獲取到的方式都相同,這個時候你就一定要考慮能不能讓代碼達到復用,咱們要學會偷懶哈,偷懶才能前進的更快哈.

下面開始今天的正文哈…

一、什么叫全局事件總線

1.1、概念的引入

我們先認清一件事情，所謂的組件之間的交互，就是我們將數據能夠做到組件之間能夠共享數據。

無論是props、EventBus、Vuex、發布訂閱等實現組件交互，本質就是做到數據共享。弄清這一點，對于使用全局事件總線，就簡單多了哈。不過今天的文章，主要是先帶著大家使用，原理等周末拉。

EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會造成難以維護的災難，因此才需要更完善的Vuex作為狀態管理中心，將通知的概念上升到共享狀態層次。

1.2、安裝全局事件總線

//想要成為事件總線的條件： //1、所有的組件對象必須都能看得到這個總線對象，因此我們把這個對象放在了Vue原型 //2、這個事件總線對象必須能調用$on和$emit方法（總線對象必須是Vue的實例化對象或者是組件對象）

確定全局事件總線: 將vm對象作為事件總線掛載到vue的原型對象上

import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = false // 關于全局總線的使用說明 // 使用全局總線的時候，更好的應用是在兄弟組件、祖孫組件之間，這些組件他們并不能做到直接通信，這個使用全局事件總線會方便很多 new Vue({render: h => h(App),// beforeCreate 位于數據掛載之前的生命周期函數beforeCreate () {// 安裝全局事件總線Vue.prototype.$bus = this} }).$mount('#app')

1.3、基本使用

小案例：

在App組件內引入一個demo組件，demo組件中有一個按鈕，點擊可以修改app組件傳給子組件的值，并更新視圖。

App組件

<template><div class="todo-container">//數據的傳遞，還是用props快哈<Demo :msg="msg"></Demo></div> </template> <script> import Demo from './components/Demo' export default {components: {Demo},data () {return {msg: 'hello,你好'}},methods: {updateMsg () {this.msg = 'hello,你好丫，我是博主寧在春'},updateMsg2 (value) {this.msg = value}},// 在加載完成后就進行全局總線的綁定mounted () {// 綁定方法，'updateMsg'是全局事件總線方法名，而后面是回調時需要執行的方法this.$bus.$on('updateMsg', this.updateMsg)this.$bus.$on('updateMsg2', this.updateMsg2)},// 養成習慣 在組件銷毀的時候，將事件進行解綁beforeDestroy () {//就是解綁事件，有多種方式，參數為空，直接是讓所有方法解綁//多個的時候，可以直接放一個數組進去。// this.$bus.$off(['updateMsg',....])this.$bus.$off('updateMsg')this.$bus.$off('updateMsg2')// 原理就讓我留到下次吧，兄弟們} } </script>

demo組件

<template><div><h1>{{msg}}</h1><button @click="updateMessage()">點擊修改</button><button @click="updateMessage2('你好丫，寧在春')">點擊修改</button></div> </template> <script> export default {props: {msg: String},methods: {updateMessage () {// 通過全局事件總線來進行交互，//第一個參數是要 回調父組件中的方法名，后面可以跟參數，多個或者對象都可以this.$bus.$emit('updateMsg')},updateMessage2 (value) {this.$bus.$emit('updateMsg2', value)}} } </script>

二、全局事件總線和Props實現組件通信的區別

個人使用總結的哈：

props用來實現組件之間通信，更多的方便于父子組件通信。如果是祖孫或者兄弟組件，將會多一層中間層，而且沒有任何用處，而且給人的感覺比較繁瑣。

全局事件總線的話，將它掛在vm原型上，對于祖孫組件、或者兄弟組件之間通信，非常的方便，不需要中間層。

后語

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

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

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

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

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

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信的全部內容，希望文章能夠幫你解決所遇到的問題。

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