微信小程序使用事件總線最域,在頁面谴分、組件之間通信

用typescript 寫了一個單例事件總線類,可在微信小程序不同頁面镀脂、組件中通信牺蹄,類里只提供事件注冊 on、事件取消 off薄翅、事件發(fā)送 emit沙兰,三個公共方法

/**
 * 自定義事件 總線
 */
export default class EventBus {
  public static updateData: string = 'updateData'; //更新數(shù)據(jù)
  private static _ins: EventBus;
  public static get ins(): EventBus {
    if (EventBus._ins == null) {
      EventBus._ins = new EventBus();
    }
    return EventBus._ins;
  }
  private _events: Map<string, Function[]>;
  constructor() {
    this._events = new Map()
  }
  //注冊一個事件
  public on(eventType: string, cb: Function): void {
    if (this._events.has(eventType)) this._events.get(eventType)?.push(cb);
    else this._events.set(eventType, [cb]);
  }
  //移除事件
  public off(eventType: string, cb: Function): void {
    if (!this._events.has(eventType)) return;
    const cbs = this._events.get(eventType);
    if (!cbs) return;
    for (let i = cbs.length - 1; i >= 0; i--) {
      if (cbs[i] === cb) {
        cbs.splice(i, 1);
        return;
      }
    }
  }
  //發(fā)送事件
  public emit(eventType: string, data: any = null): void {
    if (!this._events.has(eventType)) return;
    const cbs = this._events.get(eventType);
    if (!cbs) return;
    for (let i = 0; i < cbs.length; i++) {
      cbs[i](data);
    }
  }
}
使用方法

1.將上面的類代碼保存到一個.ts文件中
2.在需要使用的頁面或組件中引入,例如:

import EventBus from '../../utils/eventbus';

3.page中使用
在onLoad 注冊事件翘魄,在onUnload 移除事件

  onLoad() {
    EventBus.ins.on(EventBus.updateData, this.update);
  },
  update(e: any) {
    console.log('***********:index 接收數(shù)據(jù)::', e)
  },
  onUnload() {
    EventBus.ins.off(EventBus.updateData, this.receive);
  }

4.在component中使用
在created中 注冊事件鼎天,在detached 中移除事件

methods: {
    receive(e: any) {
      console.log('**********:::comp2 收到數(shù)據(jù):', e)
    }
  },
  lifetimes: {
    created() {
      EventBus.ins.on(EventBus.updateData, this.receive);
    },
    detached() {
      EventBus.ins.off(EventBus.updateData, this.receive);
      console.log('************detached');
    }
  }

5.發(fā)送事件

  EventBus.ins.emit(EventBus.updateData, { a: 10, b: 20 }); 

6.效果,在不同頁面暑竟、組件中收到事件及傳過來的參數(shù)

***********:index 接收數(shù)據(jù):: {a: 10, b: 20}
**********:::comp2 收到數(shù)據(jù): {a: 10, b: 20}
********logis 收到數(shù)據(jù): {a: 10, b: 20}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末斋射,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌绩鸣,老刑警劉巖怀大,帶你破解...
    沈念sama閱讀 212,294評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異呀闻,居然都是意外死亡,警方通過查閱死者的電腦和手機潜慎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,493評論 3 385
  • 文/潘曉璐 我一進店門捡多,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人铐炫,你說我怎么就攤上這事垒手。” “怎么了倒信?”我有些...
    開封第一講書人閱讀 157,790評論 0 348
  • 文/不壞的土叔 我叫張陵科贬,是天一觀的道長。 經(jīng)常有香客問我鳖悠,道長榜掌,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,595評論 1 284
  • 正文 為了忘掉前任乘综,我火速辦了婚禮憎账,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘卡辰。我一直安慰自己胞皱,他們只是感情好,可當我...
    茶點故事閱讀 65,718評論 6 386
  • 文/花漫 我一把揭開白布九妈。 她就那樣靜靜地躺著反砌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪萌朱。 梳的紋絲不亂的頭發(fā)上宴树,一...
    開封第一講書人閱讀 49,906評論 1 290
  • 那天,我揣著相機與錄音嚷兔,去河邊找鬼森渐。 笑死,一個胖子當著我的面吹牛冒晰,可吹牛的內(nèi)容都是我干的同衣。 我是一名探鬼主播,決...
    沈念sama閱讀 39,053評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼壶运,長吁一口氣:“原來是場噩夢啊……” “哼耐齐!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,797評論 0 268
  • 序言:老撾萬榮一對情侶失蹤埠况,失蹤者是張志新(化名)和其女友劉穎耸携,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辕翰,經(jīng)...
    沈念sama閱讀 44,250評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡夺衍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,570評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了喜命。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沟沙。...
    茶點故事閱讀 38,711評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖壁榕,靈堂內(nèi)的尸體忽然破棺而出矛紫,到底是詐尸還是另有隱情,我是刑警寧澤牌里,帶...
    沈念sama閱讀 34,388評論 4 332
  • 正文 年R本政府宣布颊咬,位于F島的核電站,受9級特大地震影響牡辽,放射性物質(zhì)發(fā)生泄漏喳篇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,018評論 3 316
  • 文/蒙蒙 一催享、第九天 我趴在偏房一處隱蔽的房頂上張望杭隙。 院中可真熱鬧,春花似錦因妙、人聲如沸痰憎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,796評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铣耘。三九已至,卻和暖如春以故,著一層夾襖步出監(jiān)牢的瞬間蜗细,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,023評論 1 266
  • 我被黑心中介騙來泰國打工怒详, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留炉媒,地道東北人。 一個月前我還...
    沈念sama閱讀 46,461評論 2 360
  • 正文 我出身青樓昆烁,卻偏偏與公主長得像吊骤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子静尼,可洞房花燭夜當晚...
    茶點故事閱讀 43,595評論 2 350

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