Vue的event-bus的js代码以及event-bus实现总结

   //一般网上有关于event的js,所以尽量用网上的js

//简单来说就是在root中导入,创建event对象,在created函数里面进行this.$bus.on('命名’,this引用的函数),就是注册事件监听。还有使用app.config.globalProperties.$bus = event,这样就可以在全局使用到event对象了

//在子组件需要在对应函数里面写this.$bus.emit('root命名的名字', 要传递的数据),就是触发事件,就可以让在root里面的对应函数接收相应的数据了

//注意on和emit都可以在event的js自己命名

class Event {
      constructor() {
        this.listeners = {}
      }
      on(name, callback) {
        if (!this.listeners[name]) {
          this.listeners[name] = []
        }
        this.listeners[name].push(callback)
      }

      off(name, callback) {
        if (!this.listeners[name]) {
          throw new Error('还未注册事件监听')
        }
        if (callback) {
          this.listeners[name] = this.listeners[name].filter(cb => cb !== callback)
          return
        }
        delete this.listeners[name]
      }
      emit(name, ...args) {
        if (!this.listeners[name]) {
          throw new Error('还未注册事件监听')
        }
        this.listeners[name].forEach(cb => cb(...args))
      }
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值