介绍
事件总线/发布-订阅模式是一种让应用程序的不相关部分相互通信的方式。
注意：本教程专门针对 Vue 2。在 Vue 3 中，$on、$off、 和$once已被删除。建议使用提供此功能的外部库。
在本文中，您将应用 Vue 强大的内置事件总线。
先决条件
要完成本教程，您需要：
- Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
- 熟悉设置 Vue.js 项目和使用 Vue.js 组件可能会有所帮助。
本教程已通过 Node v15.3.0、npmv6.14.9 和vuev2.6.11 验证。
第 1 步 – 设置项目
出于本教程的目的，您将从使用@vue/cli.
- npx @vue/cli create vue-event-bus-example --default
这将使用默认配置配置一个新的 Vue 项目：Vue 2, babel, eslint。
导航到新创建的项目目录：
- cd vue-event-bus-example
您需要创建事件总线并将其导出到某个地方，以便其他模块和组件可以使用它。首先，创建一个新文件。导入 Vue 库。然后，导出它的一个实例。
import Vue from 'vue';
export const EventBus = new Vue();
在本教程中，实例被设置为变量EventBus。
您实际上获得的是一个与 DOM 或应用程序的其余部分完全分离的组件。所有存在于它的都是它的实例方法。
现在您已经创建了事件总线，您需要将它导入到您的组件中，并调用在父组件和子组件之间传递消息时将使用的相同方法。
接下来，让我们申请EventBus.$emit()。
第 2 步 – 发送事件
考虑一个组件的场景，当有人点击它时，它会通知整个应用它被点击了多少次。
注意：本示例在此处使用单文件组件，但您可以使用任何您喜欢的方法来创建组件。
以下是您将如何使用EventBus.$emit(channel: string, payload1: any, ...)：
<template>
<button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>
<script>
import { EventBus } from '@/event-bus';
export default {
data() {
return {
clickCount: 0
}
},
methods: {
emitGlobalClickEvent() {
this.clickCount++;
EventBus.$emit('clicked', this.clickCount);
}
}
}
</script>
此代码生成一个按钮。单击该按钮将在clicked带有负载 ( clickCount)的通道 ( )上发送事件。
修改App.vue以使用此组件。
<template>
<div id="app">
<ClickCountButton></ClickCountButton>
</div>
</template>
<script>
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
</script>
接下来，让我们申请EventBus.$on。
第 3 步 – 接收事件
现在，您的应用程序的任何其他部分都可以导入事件总线并clicked使用EventBus.$on(channel: string, callback(payload1,...)).
通过修改将其应用于您的应用程序App.vue：
<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
const clickHandler = function(clickCount) {
console.log(`The button has been clicked ${clickCount} times!`)
}
EventBus.$on('clicked', clickHandler);
</script>
此代码创建一个事件侦听器clicked并将消息记录到控制台，其中包含单击按钮的次数。
注意：如果您只想监听事件的第一次发射，您可以使用EventBus.$once(channel: string, callback(payload1,...)).
接下来，让我们申请EventBus.$off。
第 4 步 – 删除事件侦听器
您可以clicked使用EventBus.$off(channel: string, callback(payload1,...)).
通过修改将其应用于您的应用程序App.vue：
<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
const clickHandler = function(clickCount) {
console.log(`The button has been clicked ${clickCount} times!`)
}
EventBus.$on('clicked', clickHandler);
EventBus.$off('clicked', clickHandler);
</script>
通过提供事件和回调，EventBus.$off只会删除此特定回调的侦听器。
注意：您还可以使用EventBus.$off('clicked')不带回调参数的方式删除特定事件的所有侦听器。
如果您真的需要从 中删除每个侦听器EventBus，无论通道如何，您都可以EventBus.$off()不带任何参数调用。
现在，你已经使用.$emit，.$on和.$off。
结论
在本教程中，您使用了 Vue 强大的内置事件总线来监听clicked事件并记录带有点击次数的消息。这是利用实现.$emit，.$on和.$off。
如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。
