一、組件之間的層級(jí)關(guān)系如下圖：

現(xiàn)要在test_page_1.vue 組件中改變，MyHeader.vue組件中的某個(gè)屬性值。

二、eventBus簡(jiǎn)介：

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

EventBus?可以較好的實(shí)現(xiàn)兄弟組件之間的數(shù)據(jù)通訊。

三、使用eventBus解決問(wèn)題

1、初始化

創(chuàng)建eventbus.js文件

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

2、在test_page_1.vue 組件中添加發(fā)送事件

<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可能會(huì)導(dǎo)致的問(wèn)題

前面提到過(guò)，如果使用不善，EventBus會(huì)是一種災(zāi)難，到底是什么樣的“災(zāi)難”了？大家都知道vue是單頁(yè)應(yīng)用，如果你在某一個(gè)頁(yè)面刷新了之后，與之相關(guān)的EventBus會(huì)被移除，這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁(yè)面，EventBus在監(jiān)聽(tīng)的時(shí)候就會(huì)觸發(fā)很多次，也是一個(gè)非常大的隱患。這時(shí)候我們就需要好好處理EventBus在項(xiàng)目中的關(guān)系。通常會(huì)用到，在vue頁(yè)面銷(xiāo)毀時(shí)，同時(shí)移除EventBus事件監(jiān)聽(tīng)。

移除eventBus事件監(jiān)聽(tīng)

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

你也可以使用?EventBus.$off('aMsg')?來(lái)移除應(yīng)用內(nèi)所有對(duì)此某個(gè)事件的監(jiān)聽(tīng)。或者直接調(diào)用?EventBus.$off()?來(lái)移除所有事件頻道，不需要添加任何參數(shù) 。

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

五、介紹全局eventbus的使用

它的工作原理是發(fā)布/訂閱方法，通常稱(chēng)為?Pub/Sub?。

1、創(chuàng)建全局eventbus

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

可以直接在項(xiàng)目中的?main.js?初始化?EventBus?:

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

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

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

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

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

同時(shí)也可以使用this.$bus.$off('sendMsg')來(lái)移除事件監(jiān)聽(tīng)。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。