javascript - 从VueJS中的全局事件总线访问事件对象

Question

我有一些页面(在 Laravel 中)，每个页面都包含一个具有不同操作 URI 的表单:

<form method="post" action="/route1">
    ...
    <button @click="emitEvent('event1')">
</form>

在 Vuejs root 中，我只有一个全局调用事件的方法:

const app = new Vue({
    el: '#app',
    methods: {
        emitEvent(event, payload) {
            EventBus.$emit(event, payload);
        }
    }
});

在我的组件中，我有一个全局事件的监听器:

data() {
    return {
        someKey: false //this value is dynamic
    }
}
mounted() {
    EventBus.$on('event1', (event) => {
        console.log(event); //returns undefined
        if(this.someKey) {
             window.location = "/another-url"; 
             //Go to this url ONLY if the is true, else go to the url from the action attibute of the form
        }
    });
}

所以基本上，如果 vue 满足某个条件，我想加载该页面。

现在，无论 vuejs 中的条件是否满足，页面都会从 html 表单加载 url。

我尝试了 @click.prevent="emitEvent('event1')"而不是 @click，但这样，如果条件为 false 并且 window.location 不运行，它就会卡住。

我正在考虑访问事件对象，然后手动阻止Default()，但只有在必要时，所以如果不是这种情况，页面将从表单的操作中加载url，但我找不到一种方法来获取Vue 中的事件对象。

我发现事件名称位于 EventBus._events.event1 中，但我无法继续，因为只有空属性，而且我不确定如何访问默认事件，以便阻止它。

我确信这一定是一种更简单/更短和更好的方法，然后为每个表单提供一个 id/class，然后访问它，然后获取它的 action 属性，这是我需要的 url，最后如果访问该 url条件不满足。这种方式可能可行，但它可能是一种旧风格？

无论如何，我在这里，感谢任何帮助。

Answer 1

您的错误位于@click-监听器中，您的调用:

emitEvent('event1')

使用一个参数调用函数，因此函数中的事件参数将始终是“string”类型的“event1”。

要回答您的问题，您必须将 @click-listener 更改为:

@click="(e) => { emitEvent(e, 'event1') }"

说明:

当 @click-listener 获取 function 作为值时，它将使用 event 作为第一个(也是唯一的)参数来调用该函数。在您的情况下，您给 @click-listener 一个 undefined 因为您没有返回值。

这里仔细看看this doc.