使用 Vue.js 创建全局事件总线
Event Bus / 订阅发布(publish-subscribe)模式 虽然名声并不好,但当你需要让应用程序里完全不相干的分块互相通讯时,这仍是一个不错的方案。原本想找一些类库来帮助实现的,但想想 Vue 内建强大的 Event Bus 系统,要不我花点时间瞧一瞧?
尝试的结果还不错,内置 Vue Components 使用的事件系统 用来起来还是挺称手的。
初始化
首先你需要做的是创建事件总线并将其导出,以便其它模块可以使用或者监听它,这部分可能会比较麻烦。
import Vue from 'vue';
export const EventBus = new Vue();
但事实上它并不麻烦!
你需要做的只是引入 Vue 并导出它的一个实例(在这种情况下,我称它为 EventBus
)。实质上它是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法而已,因此它非常的轻便。
使用 Event Bus
现在我们已经创建了 Event Bus,接下来你需要做到的就是在你的组件中加载它,并且调用同一个方法,就如你在父子组件中互相传递消息一样。
发送 Event
假如你有一个组件,实现的功能就是当被点击时,通知整个应用其被点击的次数,你可以这样做 EventBus.emit(channel: string, payload1: any, …)
。
我使用了一个 单文件组件 ,但是你可以使用其他的组件方法。
<template>
<div class="pleeease-click-me" @click="emitGlobalClickEvent()"></div>
</template>
<script>
// 导入我们刚刚创建的 EventBus
import { EventBus } from './event-bus.js';
export default {
data() {
return {
clickCount: 0
}
},
methods: {
emitGlobalClickEvent() {
this.clickCount++;
// Send the event on a channel (i-got-clicked) with a payload (the click count.)
EventBus.$emit('i-got-clicked', this.clickCount);
}
}
}
</script>
接收 Events
现在当我们的 PleaseClickMe.vue
被点击时候,只要导入了 EventBus
并且使用 EventBus.$on(channel: string, callback(payload1,…))
监听 i-got-clicked
频道的话:
// Import the EventBus.
import { EventBus } from './event-bus.js';
// Listen for the i-got-clicked event and its payload.
EventBus.$on('i-got-clicked', clickCount => {
console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});
如果你只想监听一次事件的发生,可以使用
EventBus.$once(channel: string, callback(payload1,…))
。
移除事件监听者
你可以使用以下的方法来移除对 PleaseClickMe.vue
点击次数的监听:
// 导入我们刚刚创建的 EventBus
import { EventBus } from './event-bus.js';
// 事件监听函数
const clickHandler = function(clickCount) {
console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
}
// 开始监听事件
EventBus.$on('i-got-clicked', clickHandler);
// 停止监听
EventBus.$off('i-got-clicked', clickHandler);
你也可以使用
EventBus.$off(‘i-got-clicked’)
来移除应用内所有对此事件的监听。你也可以直接调用
EventBus.$off()
来移除所有事件频道,注意不需要添加任何参数。
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: