Question

在我的自定义库中，我有几个运行ajax请求的组件，当给定请求失败时，该组件会发出error事件。

然后，在我的主要组件中，我想听所有已发出的error事件并运行方法handleErrors，但是为此，我必须在每个组件上都添加@error="handleErrors"。

是否有一种方法可以配置我的主要组件以动态捕获error个事件并调用handleErrors而无需继续每个组件并添加它？最好只更改主要部分。

Answer 1

您可以在Vue实例中使用EventBus系统。实际上，EventBus是与Main Vue实例不同的Vue实例。您可以创建自己的事件总线系统。$emit，$on和$off事件。

event-bus.js

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

，现在您可以使用了。

some-component.vue

// Import the EventBus.
import { EventBus } from './event-bus.js';
// Send the event on a channel (eventName) with a payload (the click count.)
EventBus.$emit('eventName', this.clickCount);

other-component.vue

// Import the EventBus.
import { EventBus } from './event-bus.js';

// Listen for the eventName event and its payload.
EventBus.$on('eventName', clickCount => {
  console.log(clickCount)
});

// Stop listening.
EventBus.$off('eventName');

更多信息和示例 https://alligator.io/vuejs/global-event-bus/

Answer 2

想出了一种无需重构单个组件的方法：只需使用mixin将侦听器注入每个组件中即可。

结果：

application.{scss|sass|css}

动态侦听父组件上的自定义事件

2 个答案: