全局事件总线 | Quasar Framework 中文网

全局事件总线

有时您需要一个事件总线或发布/订阅通道。 Vue已经为每个组件提供了一个事件总线。为了方便起见，您可以使用根Vue组件通过this.$root来注册并监听事件。

WARNING

不要与Quasar组件支持的事件混淆。这些是由各个组件发出的Vue事件，并且不会干扰全局事件总线。

TIP

考虑使用Vuex而不是事件总线。

Usage

请查看Vue的实例方法/事件API页面。然后让我们看看如何在应用程序的根Vue组件上注册一个事件：

// callback
function cb (msg) {
  console.log(msg)
}

// listen for an event
this.$root.$on('event_name', cb)

// listen once (only) for an event
this.$root.$once('event_name', cb)

// Make sure you stop listening for an event
// when your respective component gets destroyed
this.$root.$off('event_name', cb)


// Emitting an event:
this.$root.$emit('event_name', 'some message')

Example using event to open drawer from another component or page. Not recommended – a better way would be through Vuex, but the example below is for educational purposes only.

从另一个组件或页面打开侧滑菜单的使用事件的示例。不推荐 - 更好的方法是通过Vuex，但下面的示例仅用于教育目的。

// (1) This code is inside layout file that have a drawer
//     if this.leftDrawerOpen is true, drawer is displayed

// (2) Listen for an event in created
created () {
  this.$root.$on('openLeftDrawer', this.openLeftDrawerCallback)
},

beforeDestroy () {
  // Don't forget to turn the listener off before your component is destroyed
  this.$root.$off('openLeftDrawer', this.openLeftDrawerCallback)
}

methods: {
  // (3) Define the callback in methods
  openLeftDrawerCallback () {
    this.leftDrawerOpen = !this.leftDrawerOpen
  }
}

// (4) In another component or page, emit the event!
//     Call the method when clicking button etc.
methods: {
  openLeftDrawer () {
    this.$root.$emit('openLeftDrawer')
  }
}

用于QDialog和QMenu

这些组件使用Quasar Portals，从而可以在<body>标记的末尾呈现内容，以便： 1.避免css污染 2.避免z-index问题 3.避免可能的父CSS溢出 4.在iOS上正常工作

如果需要在这些组件中使用总线，则必须通过.js文件创建自己的全局总线：

import Vue from 'vue'
const bus = new Vue()
export default bus

然后在需要访问此总线的任何位置导入此文件。

阅读更多?