EventBus 工具

v2.8.4+

Quasar 提供了一个全局 EventBus，在从 Quasar v1 升级时特别有用，因为原生 Vue 2 接口已被移除。

方法

class EventBus {
  on (event: string, callback: Function, ctx?: any): this;
  once (event: string, callback: Function, ctx?: any): this;
  emit (event: string, ...args: any[]): this;
  off (event: string, callback?: Function): this;
}

用法

import { EventBus } from 'quasar'

const bus = new EventBus()

bus.on('some-event', (arg1, arg2, arg3) => {
 // do some work
})

bus.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value')

在使用 TypeScript 时，事件可以被强类型化

// Quasar v2.11.11+
import { EventBus } from 'quasar'

const bus = new EventBus<{
    'some-event': (arg1: string, arg2: string, arg3: string) => void;
    'other': (arg: boolean) => void;
}>()

bus.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value')

便捷用法

在您的应用程序中创建一个文件，您可以在其中实例化并导出新的事件总线，然后在整个应用程序中导入并使用它。

或者，在 Quasar CLI 项目中，为了您的方便（所以不是必需的），您可以创建一个引导文件并提供一个事件总线（确保您在 quasar.config 文件 > boot 中注册它）。

import { EventBus } from 'quasar'
import { boot } from 'quasar/wrappers'

export default boot(({ app }) => {
  const bus = new EventBus()

  // for Options API
  app.config.globalProperties.$bus = bus

  // for Composition API
  app.provide('bus', bus)
})

然后，在您的任何组件中，您可以使用

// Options API
this.$bus

// Composition API
import { inject } from 'vue'

const bus = inject('bus') // inside setup()

发现错误？在浏览器中编辑此页面

1. 简介

1.1. 方法

1.2. 用法

1.3. 方便用法