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

Question

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

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

在 Vuejs 根目录中，我只有一个全局调用事件的方法：

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，但是这样，如果条件为假并且window.location 没有运行，它就会卡住。

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

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

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

无论如何，我在这里是堆栈，我很感激任何帮助。

Answer 1

我会走这条路（像往常一样）：

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

这样，提交事件将遵守预防措施。然后：

var that = this; // added a buffer to use in the event (hackish)
EventBus.$on('event1', (event) => {
    if(that.someKey) {
         window.location = "/another-url";     
         return false; // will prevent submission and change the url
    }
    return true; // will proceed submission
});

Answer 2

你的错误在于@click-listener，你的电话：

emitEvent('event1')

使用 ONE 参数调用函数，因此函数中的 event-param 将始终是“字符串”类型的“event1”。

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

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

解释：

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

这里仔细看看this doc.