Vue-EventBus心得

Case 1:

1倒庵、新建event.js文件曾棕,初始化

// event-bus.js
importVuefrom 'vue'
exportconstEventBus = newVue()

2、在發(fā)送以及接收的組件中都引入此 event.js

import {
    EventBus
}from "../event-bus.js";

3革娄、發(fā)送組件加入代碼

EventBus.$emit("hello", this.number);

4、接收組件加入代碼

EventBus.$on("hello", (number) = > {
    console.log(number)
});

Case 2:

直接在項目中的main.js初始化EventBus,具體發(fā)送冕碟、接收稠腊,同上Case1

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

Case3:

解釋說明:中央事件總線bus,其作為一個簡單的組件傳遞事件鸣哀,用于解決跨級和兄弟組件通信的問題架忌,將其封裝為一個Vue的插件,那么就可以在組件之間使用我衬,而不需要導入bus

1叹放、新建目錄vue-bus,在目錄里新建vue-bus.js文件挠羔,具體代碼如下:

//vue-bus.js
const install = function(Vue) {
    const Bus = new Vue({
        methods: {
            emit(event, ...args) {
                this.$emit(event, ...args);
            },
            on(event, callback) {
                this.$on(event, callback);
            },
            off(event, callback) {
                this.$off(event, callback);
            }
        }
    });
    Vue.prototype.$bus = Bus;
};
export default install;

注:emit(event,...args)中的...args是函數(shù)參數(shù)的解構(gòu)井仰,因為不知道組件會傳遞多少個參數(shù)進來,使用...args可以把當前參數(shù)到最后的參數(shù)全部獲取到破加。

2俱恶、在main.js中使用插件:

//main.js
import VueBus from './vue-bus/vue-bus';
Vue.use(VueBus);

3合是、發(fā)送組件加入代碼

this.$bus.emit('hello',this.number,this.number2);

4了罪、接收組件加入代碼

this.$bus.on('hello', (number, number2) = > {
    console.log(number)
    console.log(number2)
})

綜上所述,對于Case3的方式聪全,通過插件的形式使用后泊藕,所有的組件都可以直接使用$bus,不需要每一個組件都導入bus組件难礼。

有兩點需要注意:
1娃圆、$bus.on應(yīng)該在created鉤子內(nèi)使用,如果在mounted使用蛾茉,有可能接收不到其他組件來自created鉤子內(nèi)發(fā)出的事件讼呢。

2、使用了$bus.on谦炬,在beforeDestroy鉤子里應(yīng)該再使用$bus.off解除吝岭,因為組件銷毀后,沒有必要把監(jiān)聽句柄存儲在vue-bus里了吧寺。

beforeDestroy() {
    this.$bus.off('hello', something);
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末窜管,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子稚机,更是在濱河造成了極大的恐慌幕帆,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赖条,死亡現(xiàn)場離奇詭異失乾,居然都是意外死亡,警方通過查閱死者的電腦和手機纬乍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門碱茁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人仿贬,你說我怎么就攤上這事纽竣。” “怎么了茧泪?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵蜓氨,是天一觀的道長。 經(jīng)常有香客問我队伟,道長穴吹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任嗜侮,我火速辦了婚禮港令,結(jié)果婚禮上啥容,老公的妹妹穿的比我還像新娘。我一直安慰自己顷霹,他們只是感情好咪惠,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著泼返,像睡著了一般。 火紅的嫁衣襯著肌膚如雪姨拥。 梳的紋絲不亂的頭發(fā)上绅喉,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音叫乌,去河邊找鬼柴罐。 笑死,一個胖子當著我的面吹牛憨奸,可吹牛的內(nèi)容都是我干的革屠。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼排宰,長吁一口氣:“原來是場噩夢啊……” “哼似芝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起板甘,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤党瓮,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后盐类,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寞奸,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年在跳,在試婚紗的時候發(fā)現(xiàn)自己被綠了枪萄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡猫妙,死狀恐怖瓷翻,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情割坠,我是刑警寧澤逻悠,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站韭脊,受9級特大地震影響童谒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜沪羔,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一饥伊、第九天 我趴在偏房一處隱蔽的房頂上張望象浑。 院中可真熱鬧,春花似錦琅豆、人聲如沸愉豺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蚪拦。三九已至,卻和暖如春冻押,著一層夾襖步出監(jiān)牢的瞬間驰贷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工洛巢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留括袒,地道東北人。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓稿茉,卻偏偏與公主長得像锹锰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子漓库,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容

  • vue-cli搭建項目 確保安裝了node與npm 再目標文件夾下打開終端 執(zhí)行cnpm i vue-cli -g...
    Akiko_秋子閱讀 3,232評論 1 22
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,207評論 0 6
  • 主要還是自己看的恃慧,所有內(nèi)容來自官方文檔。 介紹 Vue.js 是什么 Vue (讀音 /vju?/渺蒿,類似于 vie...
    Leonzai閱讀 3,348評論 0 25
  • 渲染函數(shù)和jsx 在vue中我們可以不用template來指定組件的模板糕伐,而是用render函數(shù)來創(chuàng)建虛擬dom結(jié)...
    6e5e50574d74閱讀 717評論 0 0
  • 最后一次見你 那天下著小雨 我撐著小綠傘 你從我身邊走過 就是那一瞬間 我們又一次呼吸了同一片空氣 你慢慢的向前走...
    薇薇抽閱讀 206評論 0 1