vue非父子組件傳值和事件總線（eventbus）的使用方法是什么-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)vue非父子組件傳值和事件總線（eventbus）的使用方法是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專注于隆德網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供隆德營銷型網(wǎng)站建設(shè)，隆德網(wǎng)站制作、隆德網(wǎng)頁設(shè)計、隆德網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造隆德網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供隆德網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

先說一下什么是事件總線，其實就是訂閱發(fā)布者模式；

比如有一個bus對象，這個對象上有兩個方法，一個是on（監(jiān)聽，也就是訂閱），一個是emit（觸發(fā)，也就是發(fā)布），我們通過on方法去監(jiān)聽某個事件，再用emit去觸發(fā)這個事件，同時調(diào)用on中的回調(diào)函數(shù)，這樣就完成了一次事件觸發(fā)；

這是一種設(shè)計模式，和語言沒有關(guān)系；

如果不太了解什么是訂閱發(fā)布者模式，請移步看這篇文章JavaScript設(shè)計模式--觀察者模式（發(fā)布者-訂閱者模式）

在實際開發(fā)中，往往最麻煩的就是各種組件之間的傳值問題；如果利用事件總線就會讓這件事情變得很簡單；

vue自帶事件總線的短板

我們都知道在vue被實例化之后，他就具備了充當事件總線對象的能力，在他上面掛了兩個方法，是$emit和$on；

而vue文檔說的很明白，$emit會觸發(fā)當前實例上的事件，附加參數(shù)都會傳給監(jiān)聽器回調(diào)；

由于在實際工作中，我們都是以組件的形式開發(fā)，每個組件就是一個實例；

所以利用vue自帶的總線能力有很大的局限性，最多只能從子組件觸發(fā)到父組件中，而不能在非父子組件之間傳值；

所以這時，我們就需要有一個全局的事件總線對象，讓我們掛載監(jiān)聽事件和觸發(fā)事件；

舉個例子，子組件向父組件傳值；父組件向子組件傳值很簡單，我們這里不說

// 子組件中

// 父組件

實現(xiàn)全局事件總線對象的幾種方式

方式一，也是我自己使用的方式（推薦使用，簡單）

大概思路是 ：在main.js，也就是入口文件中，我們在vue的原型上添加一個bus對象；

具體實現(xiàn)方式如下：

下面的組件A和組件B可以是項目中任意兩個組件

//在mian.js中
Vue.prototype.bus = new Vue()  //這樣我們就實現(xiàn)了全局的事件總線對象

//組件A中，監(jiān)聽事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是觸發(fā)updata事件帶過來的數(shù)據(jù)
})

//組件B中，觸發(fā)事件
this.bus.$emit('updata', data)  //data就是觸發(fā)updata事件要帶走的數(shù)據(jù)

方式二，稍微有點麻煩，但也很容易理解

大概的實現(xiàn)思路： 新建一個bus.js文件， 在這個文件里實例化一下vue；然后在組件A和組件B中分別引入這個bus.js文件，將事件監(jiān)聽和事件觸發(fā)都掛到bus.js這個實例上，這樣就可以實現(xiàn)全局的監(jiān)聽與觸發(fā)了

寫個例子bus.js文件

// bus.js文件
import Vue from 'vue'
export default new Vue()

組件A

// 組件A ，監(jiān)聽事件send

組件B

// 組件B， 觸發(fā)事件send

這樣我們就完成了一個簡單非父子組件之間的傳值。

感謝各位的閱讀！關(guān)于vue非父子組件傳值和事件總線（eventbus）的使用方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前文章：vue非父子組件傳值和事件總線（eventbus）的使用方法是什么-創(chuàng)新互聯(lián)
分享鏈接：http://m.jiaotiyi.com/article/dchehs.html