模拟Vue中的组件通信（$on,$emit）

  1. class MyEvent {
  2.   protected readonly store: { [key: string]: Function };
  3.   private static instance: MyEvent;
  5.   constructor() {
  6.     if (!MyEvent.instance) {
  7.       this.store = {}
  8.       MyEvent.instance = this
  9.     }
  10.     return MyEvent.instance
  11.   }
  13.   $on(type: string, callBack: Function) {
  14.     if (!this.store[type]) {
  15.       this.store[type] = callBack
  16.     }
  17.   }
  18.   $emit(type: string, data?: any) {
  19.     if (!this.store[type]) {
  20.       console.warn(`当前${type}没有被注册！`)
  21.     } else {
  22.       let fn = this.store[type]
  23.       fn(data)
  24.     }
  25.   }
  26.   $off(type: string) {
  27.     delete this.store[type]
  28.   }
  29. }
  31. let eve = new MyEvent()
  32. eve.$on("success",function(e){
  33.   console.log(e)
  34. })
  36. eve.$emit("success",{detail:"ok"})