資訊專欄INFORMATION COLUMN
摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請在下方評論區(qū)留言，或郵件給我，共同學(xué)習(xí)進步。
歡迎訪問我的個人博客：http://www.xiaolongwu.cn
前言先說一下什么是事件總線，其實就是訂閱發(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被實例化之后，他就具備了充當(dāng)事件總線對象的能力，在他上面掛了兩個方法，是$emit和$on；
而vue文檔說的很明白，$emit會觸發(fā)當(dāng)前實例上的事件，附加參數(shù)都會傳給監(jiān)聽器回調(diào)；
由于在實際工作中，我們都是以組件的形式開發(fā)，每個組件就是一個實例；
所以利用vue自帶的總線能力有很大的局限性，最多只能從子組件觸發(fā)到父組件中，而不能在非父子組件之間傳值；
所以這時，我們就需要有一個全局的事件總線對象，讓我們掛載監(jiān)聽事件和觸發(fā)事件；
// 子組件中{{child}}
// 父組件實現(xiàn)全局事件總線對象的幾種方式 方式一，也是我自己使用的方式（推薦使用，簡單）{{name}} // 在父組件中監(jiān)聽 fromChild事件
大概思路是 ：在main.js，也就是入口文件中，我們在vue的原型上添加一個bus對象；
具體實現(xiàn)方式如下：
//在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文件 import Vue from "vue" export default new Vue()
// 組件A ，監(jiān)聽事件send{{name}}
// 組件B， 觸發(fā)事件send
這樣我們就完成了一個簡單非父子組件之間的傳值。
我的個人博客地址：http://www.xiaolongwu.cn
github資源地址：vue -- 非父子組件傳值，事件總線（eventbus）的使用方式
我的CSDN博客地址：https://blog.csdn.net/wxl1555
如果您對我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請在下方評論區(qū)留言，或郵件給我，共同學(xué)習(xí)進步。
郵箱：wuxiaolong802@163.com
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100878.html
摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。 之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...
摘要：我在中寫了這段代碼在組件被創(chuàng)建時候?qū)?zhí)行此函數(shù)相當(dāng)于進入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個回調(diào)函數(shù)按道理在元素被創(chuàng)建的時候，會將監(jiān)聽到的值賦給并且打印。 天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻 ——蕭鼎和我 上一節(jié)列出了５個關(guān)鍵點，第一個路由已經(jīng)解決了，接下來解決第二個問題： 組件的通信問題 一、組件的關(guān)系 組件之間的關(guān)系無非就是兩種父子關(guān)系...
摘要：同時有一種特殊的實現(xiàn)方案。組件之間傳值有這么幾種數(shù)據(jù)傳遞方式，和特殊的。在所有實例中使用其進行數(shù)據(jù)的通信。雙多方使用同名事件進行溝通。數(shù)據(jù)非長效數(shù)據(jù)，無法保存，只在后生效。這樣約定的好處是，我們能夠記錄所有中發(fā)生的改變。 前言 最近碰到了比較多的關(guān)于vue的eventBus的問題，之前定技術(shù)選型的時候也被問到了，vuex和eventBus的使用范圍。所以簡單的寫一下。同時有一種特殊的實...
摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個標(biāo)識，在子組件內(nèi)部用接收，子組件在模板里可以通過的形式進行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個標(biāo)識，在子組件內(nèi)部用props接收，子組件在模板里可以通過{{}}的...
摘要：組件之間的通訊分為三種父給子傳子給父傳兄弟組件之間的通訊父組件給子組件傳值子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個標(biāo)識，在子組件內(nèi)部用接收，子組件在模板里可以通過的形式進行使用。 組件之間的通訊分為三種 父給子傳 子給父傳 兄弟組件之間的通訊 1 父組件給子組件傳值 子組件嵌套在父組件內(nèi)部，父組件給子組件傳遞一個標(biāo)識，在子組件內(nèi)部用props接收，子組件在模板里可以通過{{}}的...
閱讀 3426·2021-11-15 11:39
閱讀 1569·2021-09-22 10:02
閱讀 1317·2021-08-27 16:24
閱讀 3603·2019-08-30 15:52
閱讀 3417·2019-08-29 16:20
閱讀 831·2019-08-28 18:12
閱讀 555·2019-08-26 18:27
閱讀 725·2019-08-26 13:32
