使用 Vue.js 创建全局事件总线

翻译 科大大 ⋅ 于 2周前 ⋅ 98 阅读 ⋅ 原文地址
这是一篇社区协同翻译的文章,已完成翻译,更多信息请点击 协同翻译介绍

Event Bus / 订阅发布(publish-subscribe)模式 虽然名声并不好,但当你需要让应用程序里完全不相干的分块互相通讯时,这仍是一个不错的方案。原本想找一些类库来帮助实现的,但想想 Vue 内建强大的 Event Bus 系统,要不我花点时间瞧一瞧?

尝试的结果还不错,内置 Vue Components 使用的事件系统 用来起来还是挺称手的。

Summer 翻译于 1周前

初始化

首先你需要做的是创建事件总线并将其导出,以便其它模块可以使用或者监听它,这部分可能会比较麻烦。

import Vue from 'vue';
export const EventBus = new Vue();

但事实上它并不麻烦!
你需要做的只是引入 Vue 并导出它的一个实例(在这种情况下,我称它为 EventBus )。实质上它是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法而已,因此它非常的轻便。

科大大 翻译于 1周前

使用 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>
Summer 翻译于 1周前

接收 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,…))

Summer 翻译于 1周前

移除事件监听者

你可以使用以下的方法来移除对 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() 来移除所有事件频道,注意不需要添加任何参数。

Summer 翻译于 1周前

原文地址:https://alligator.io/vuejs/global-event-...

译文地址:https://vuejscaff.com/topics/86/creating...


本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

回复数量: 0
    暂无评论~~
    您需要登陆以后才能留下评论!

    Vue.js 官方中文文档

    前端开发环境部署