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))
      }
    }

相关推荐

  1. Vueevent-busjs代码以及event-bus实现总结

    2024-01-19 18:40:03       51 阅读
  2. vue3跨组件(多组件)通信:事件总线Event Bus

    2024-01-19 18:40:03       61 阅读
  3. Vue.js 事件循环(Event Loop)机制

    2024-01-19 18:40:03       33 阅读
  4. $bus用法 vue

    2024-01-19 18:40:03       47 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-19 18:40:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-19 18:40:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-19 18:40:03       87 阅读
  4. Python语言-面向对象

    2024-01-19 18:40:03       96 阅读

热门阅读

  1. C#设计模式教程(3):抽象工厂模式

    2024-01-19 18:40:03       55 阅读
  2. CSS-Flex布局

    2024-01-19 18:40:03       40 阅读
  3. 时间格式 yyyyMMdd

    2024-01-19 18:40:03       56 阅读
  4. mysql8,快速添加列

    2024-01-19 18:40:03       58 阅读
  5. C语言K&R圣经笔记 5.11函数指针

    2024-01-19 18:40:03       55 阅读
  6. 设计模式——责任链模式

    2024-01-19 18:40:03       56 阅读