从一个vuejs2销毁后没有向其他组件开火的全局事件

Question

我是vuejs 2的新手。我有很多组件，我在全局事件处理方面遇到了问题，这是我的组件结构->形象我正在使用动态组件来处理我的组件。我有第一部分和第二部分的表格。如果我提交表单，它将保存在allData.js文件中，并显示在那里。因此，当我研究并发现，要与组件通信，我需要使用全局事件处理程序(eventBus(。这是我的代码(只包括脚本部分(：

在我的main.js中，我包含了以下内容：

import Vue from 'vue';
import App from './App.vue';
import allData from './components/allDataTemplate.vue';
Vue.prototype.$eventHub = new Vue();
//Other codes

到那时，$eventHub将可以从任何组件访问，我不必导入到任何其他组件。

在我的App.js中，我包含了我所有的表单组件：

import componentOne from './components/componentOneTemplate';
import componentTwo from './components/componentTwoTemplate';
//Other codes

我是我的组件一/二我遇到这样的事件：

this.$eventHub.$emit('DataPassed', formData);

现在，在allData.js文件中，我需要监听这个处理程序(可能是有问题的部分(，我正在监听那个事件，并在离开它时销毁它：

methods: {
whenCalled() {
console.log('fired');
}
},
created() {
this.$eventHub.$on('DataPassed', this.whenCalled);
},
beforeDestroy() {
this.$eventHub.$off('DataPassed', this.whenCalled);
}

问题1：如果我破坏了事件，这里的事件没有被监听。问题2：但如果我评论掉destroy事件，我可以监听该事件，这会带来另一个问题。它触发了很多次(我访问选项卡的时间计数(。有人能帮我解决这个问题吗？

Answer 1

我认为你应该做

this.$eventHub.$on('DataPassed', this.whenCalled.bind(this));

或者你可以做

this.$eventHub.$on('DataPassed', () => { this.whenCalled });

我怀疑这个问题与函数"whenCalled"的作用域有关，在上如何在$中声明它

请检查这个链接，我做了一个助手类，它被注入为VueHelper，优点是可以在组件和js文件(没有组件(中抛出事件。我正在使用这个代码，我相信它是有效的。https://kopy.io/ncytP

已更新kopy.iohttps://kopy.io/5u63D

更新：由于kopy文件已经过期，我将在下面添加完整的代码

// Class EventEmitter
// events/index.js
import Vue from 'vue'
export class AppEventEmitter {
constructor () {
this.evt = new Vue()
}
listen (evt, callback) {
this.evt.$on(evt, callback)
}
fire (evt, data = null) {
this.evt.$emit(evt, data)
}
destroy (evt, callback) {
this.evt.$off(evt, callback)
}
}
export const AppEvent = new AppEventEmitter()
________________________________________________
// Main.js
import { AppEvent } from 'src/events'
Vue.prototype.$event = AppEvent
// Usage in vue components
this.$event.listen('ChartDataPassed', () => { this.whenCalled() }) 
this.$event.fire('ChartDataPassed', { value: 1, key: 'value' })
this.$event.destroy('ChartDataPassed', () => { this.whenCalled() });
// Usage in JS files
// It works even if you also throw the event in other js files by doing
AppEvent.fire('submission-process:photos-completed', { value: 1, key: 'value' })

Answer 2

您必须按照以下方式编写。。。

this.$eventHub.$on('DataPassed', function(payload) {
// Here you can do anything with your passed data as payload
});

ES6格式，

this.$eventHub.$on('DataPassed', (payload) => {
// try something from here.
})