内联(模板内)事件处理程序中的Vue 2参数

时间:2016-11-08 07:55:49

标签: vue.js

是否可以在内联/模板内处理程序中访问传递给发出事件的参数/参数?类似的东西:

<component @some-event="someObject.field = $arguments[0]"></component

我正在尝试做的事情是为范围中的对象分配值。我知道我可以创建一个方法来执行该操作并将其用作事件的处理程序,但我想知道这是否可以作为内联语句。

2 个答案:

答案 0 :(得分:17)

不是$arguments[0],而只是arguments[0](没有$)。我很惊讶它实际上在内联处理程序中工作。因此,以下代码有效且可行:

<component @some-event="someObject.field = arguments[0]"></component>

Methods in Inline Handlers的文档将$event指定为一个特殊变量,它获取通过事件传递的第一个参数。我一直用到现在。

在阅读了您的问题之后,更多的研究使我得到了这个参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

似乎每个javascript函数都有一个名为arguments的局部变量,当一个函数需要获得可变数量的参数时使用它。

使用arguments[]作为内联语句肯定是可行的,但在vue.js框架的上下文中没有记录。另一方面,如果您在事件的内联处理程序中使用$event,那么它会更清晰,并且在将来的Vue.js版本中不会中断

$event的示例用法:

<component @some-event="someObject.field = $event"></component>

答案 1 :(得分:0)

  

有些人并不知道。   除了$event之外,内联处理程序还可以访问arguments

例如,我使用的v-dropzone传递了许多参数(例如文件,响应)。

使用

<v-dropzone @some-event="callMethod($event, 'some other arg')" >

将仅捕获第一个参数。

因此解决方案是:

<v-dropzone @some-event="callMethod(arguments, 'some other arg')" >