一、組件之間的層級關系如下圖：

現要在test_page_1.vue 組件中改變，MyHeader.vue組件中的某個屬性值。

二、eventBus簡介：

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

EventBus?可以較好的實現兄弟組件之間的數據通訊。

三、使用eventBus解決問題

1、初始化

創建eventbus.js文件

import Vue from 'vue'// 解決多組件傳值問題 export const globalBus = new Vue();

2、在test_page_1.vue 組件中添加發送事件

<script> import { globalBus } from '../../eventBus'; export default {name: 'TestPage1',data(){return {input: ''}},methods: {change(){globalBus.$emit("change-welcome",this.input);console.log(this.input);}} } </script>

3、在MyHeader.vue中添加接收事件

<script> import { globalBus } from '../eventBus';export default {name: 'MyHeader',data() {}},methods : {...},mounted: function(){globalBus.$on("change-welcome",welcomeMsg =>{this.welcomeMsg = welcomeMsg;});} } </script>

四、eventBus可能會導致的問題

前面提到過，如果使用不善，EventBus會是一種災難，到底是什么樣的“災難”了？大家都知道vue是單頁應用，如果你在某一個頁面刷新了之后，與之相關的EventBus會被移除，這樣就導致業務走不下去。還要就是如果業務有反復操作的頁面，EventBus在監聽的時候就會觸發很多次，也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關系。通常會用到，在vue頁面銷毀時，同時移除EventBus事件監聽。

移除eventBus事件監聽

import { eventBus } from './event-bus.js' EventBus.$off('aMsg', {})

你也可以使用?EventBus.$off('aMsg')?來移除應用內所有對此某個事件的監聽。或者直接調用?EventBus.$off()?來移除所有事件頻道，不需要添加任何參數 。

上面就是?EventBus?的使用方法，是不是很簡單。上面的示例中我們也看到了，每次使用?EventBus?時都需要在各組件中引入?event-bus.js?。事實上，我們還可以通過別的方式，讓事情變得簡單一些。那就是創建一個全局的?EventBus?。接下來的示例向大家演示如何在Vue項目中創建一個全局的?EventBus?。

五、介紹全局eventbus的使用

它的工作原理是發布/訂閱方法，通常稱為?Pub/Sub?。

1、創建全局eventbus

var EventBus = new Vue();Object.defineProperties(Vue.prototype, {$bus: {get: function () {return EventBus}} })

可以直接在項目中的?main.js?初始化?EventBus?:

// main.js Vue.prototype.$EventBus = new Vue()

在這個特定的總線中使用兩個方法$on和$emit。一個用于創建發出的事件，它就是$emit；另一個用于訂閱$on：

var EventBus = new Vue();this.$bus.$emit('nameOfEvent', { ... pass some event data ...});this.$bus.$on('nameOfEvent',($event) => {// ... })

然后我們可以在某個Vue頁面使用this.$bus.$emit("sendMsg", '我是web秀');，另一個Vue頁面使用

this.$bus.$on('updateMessage', function(value) {console.log(value); })

同時也可以使用this.$bus.$off('sendMsg')來移除事件監聽。

總結

以上是生活随笔為你收集整理的Vue通过eventBut实现组件全局通信的全部內容，希望文章能夠幫你解決所遇到的問題。

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