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