时间戳

首页 > 解决方案 > 单击时的多个功能可防止带有事件参数的功能-Vue

javascript - 单击时的多个功能可防止带有事件参数的功能-Vue

问题描述

如果我有多个函数传递给点击事件，即

@click="
    inputHandler();
    sendToken(computedUser.email);
    responseMessage();
"

带有事件参数的函数：

inputHandler(e) {
    // code
}

不会跑。如果我自己传递它：

@click="inputHandler"

它工作正常。

为什么会这样，我该如何解决？

标签： javascriptvue.js

解决方案

在内部，Vue 使用一些 RegExps 来决定您使用哪种形式的事件处理程序。

如果它似乎是一个方法的名称，它将调用它并传递事件。

如果它似乎是内联代码，它只会运行它。在这种情况下，事件对象可以作为$event.

所以：

@click="inputHandler($event)"

大致相当于：

@click="inputHandler"

严格来说，这些并不完全等效，例如，对于发出多个参数的组件事件，您只会$event像这样使用第一个。

请参阅https://vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers

如需更深入的了解，请参阅 Vue 源代码：

https://github.com/vuejs/vue/blob/0baa129d4cad44cf1847b0eaf07e95d4c71ab494/src/compiler/codegen/events.js#L96

给你的眼睛几分钟时间来调整，这并不难理解。

就我个人而言，我尽量避免比内联侦听器中的单个方法调用更复杂的事情。相反，我建议有类似的东西@click="onSendClick"，让方法onSendClick担心细节。

推荐阅读