如何在 Vue 2 中创建全局事件总线

介绍

活动总线 / 发布订阅模式是让您的应用程序中不相关的部分互相交谈的方式。

Vue 组件中使用的事件系统可以在事件总线 / 发布订阅模式中使用。

<$>[注] **注:**本教程专为Vue 2。在Vue 3中,已删除了(https://v3.vuejs.org/guide/migration/events-api.html#_3-x-update)。提供此功能的外部库是(https://v3.vuejs.org/guide/migration/events-api.html#migration-strategy)。

在本文中,您将应用Vue的强大内置事件巴士。

前提条件

要完成本教程,您将需要:

Node.js 本地安装,您可以按照如何安装 Node.js 和创建本地开发环境进行操作。 *对设置 Vue.js 项目和使用 Vue.js 组件的一些熟悉可能是有益的.

本教程已通过 Node v15.3.0、npm v6.14.9 和 vue v2.6.11 进行验证。

步骤1 - 设置项目

对于本教程的目的,您将从@vue/cli生成的默认Vue项目中构建。

1npx @vue/cli create vue-event-bus-example --default

这将配置一个新的Vue项目,具有默认配置:Vue 2,babel,eslint。

导航到新创建的项目目录:

1cd vue-event-bus-example

您需要创建事件总线,并将其导出到某个地方,以便其他模块和组件可以使用它. 首先,创建一个新的文件. 导入视图库. 然后导出一个实例。

1[label src/event-bus.js]
2import Vue from 'vue';
3export const EventBus = new Vue();

对于本教程,该实例被设置为变量EventBus。

您基本上得到的是一个完全脱离 DOM 或其他应用程序的组件,其中存在的只是其实例方法。

现在您已经创建了事件巴士,您需要将其导入到您的组件中,并使用相同的方法调用,如果您在父母和子女组件之间传输消息。

接下來,我們應用「EventBus.$emit()」。

步骤2 - 发送事件

考虑一个组件的场景,该组件通知整个应用程序每当有人点击它时,它被点击了多少次。

<$>[注] **注:**此示例在这里使用了单个文件组件,但您可以使用您想要的任何组件创建方法。

以下是如何使用EventBus.$emit(频道:字符串, payload1:任何,...)来实现:

 1[label src/components/ClickCountButton.vue]
 2<template>
 3  <button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
 4</template>
 5
 6<script>
 7import { EventBus } from '@/event-bus';
 8
 9export default {
10  data() {
11    return {
12      clickCount: 0
13    }
14  },
15
16  methods: {
17    emitGlobalClickEvent() {
18      this.clickCount++;
19      EventBus.$emit('clicked', this.clickCount);
20    }
21  }
22}
23</script>

点击该按钮会将事件发送到一个频道上(‘点击’)具有盈利负载(‘clickCount’)。

更改App.vue以使用此组件。

 1[label src/App.vue]
 2<template>
 3  <div id="app">
 4    <ClickCountButton></ClickCountButton>
 5  </div>
 6</template>
 7
 8<script>
 9import ClickCountButton from './components/ClickCountButton'
10
11export default {
12  name: 'App',
13  components: {
14    ClickCountButton
15  }
16}
17</script>

接下来,让我们应用EventBus.$on。

步骤3 - 接收事件

现在,您的应用程序的任何其他部分都可以导入事件巴士并在点击频道上使用EventBus.$on(频道: string, callback(payload1,...))。

通过修改App.vue来应用到您的应用程序:

 1[label src/App.vue]
 2<script>
 3import { EventBus } from './event-bus';
 4import ClickCountButton from './components/ClickCountButton'
 5
 6export default {
 7  name: 'App',
 8  components: {
 9    ClickCountButton
10  }
11}
12
13const clickHandler = function(clickCount) {
14  console.log(`The button has been clicked ${clickCount} times!`)
15}
16
17EventBus.$on('clicked', clickHandler);
18</script>

此代码创建了一个点击的事件倾听器,并记录向控制台的消息,该按钮被点击的次数。

<$>[注] 注: 如果您只想听一个事件的第一个广播,您可以使用 EventBus.$once(频道: string,回调(payload1,...))。

接下来,让我们应用EventBus.$off。

步骤 4 – 删除事件收听器

您可以使用「EventBus.$off(频道: string, callback(payload1,...))」取消从点击频道的处理器注册。

通过修改App.vue来应用到您的应用程序:

 1[label src/App.vue]
 2<script>
 3import { EventBus } from './event-bus';
 4import ClickCountButton from './components/ClickCountButton'
 5
 6export default {
 7  name: 'App',
 8  components: {
 9    ClickCountButton
10  }
11}
12
13const clickHandler = function(clickCount) {
14  console.log(`The button has been clicked ${clickCount} times!`)
15}
16
17EventBus.$on('clicked', clickHandler);
18
19EventBus.$off('clicked', clickHandler);
20</script>

通过提供事件和回调,EventBus.$off只会删除该特定回调的倾听者。

<$>[注] 注: 您还可以使用EventBus.$off('clicked')来删除特定事件的所有听众,而无需回调参数。

如果你真的需要从EventBus中删除每一个听众,无论频道如何,你可以打电话给EventBus.$off()没有任何论点

现在,你已经使用了.$emit,.$on和.$off。

结论

在本教程中,您使用了Vue的强大的内置事件巴士来听取点击事件,并使用点击计数登录消息。

如果您想了解有关 Vue.js 的更多信息,请参阅我们的 Vue.js 主题页面以获取练习和编程项目。