VUE：当发射事件调用父组件时，我们可以获取包含发射事件传递的所有参数的参数答案

【问题标题】：VUE: when emitted event call parent conponent, we can get arguments which inculdes all the parameter that emitted event passVUE：当发射事件调用父组件时，我们可以获取包含发射事件传递的所有参数的参数
【发布时间】：2020-03-24 18:26:07
【问题描述】：

我有以下代码

// child component
this.$emit('someEvent', 1, 2, 3)
// parent component
<child @someEvent="handleSomeEvent(arguments, 5,6)"></child>
methods: {
  handleSomeEvent (arg, a, b) {
    console.log(...arg); // 1,2,3
  }
}

我想知道

代码是如何工作的？
为什么我们可以得到参数？

我不明白原理，我找不到答案表格源代码或互联网。谁能帮我解释一下，拜托。

【问题讨论】：

标签： javascript vue.js frontend

【解决方案1】：

据我所知，没有记录在内联事件处理程序中使用arguments。您可以使用显式函数实现类似的功能，而无需借助 arguments：

@someEvent="(a, b, c) => { handleSomeEvent(a, b, c, 5, 6) }"

或：

@someEvent="(...args) => { handleSomeEvent(args, 5, 6) }"

至于为什么使用arguments有效，相关源码在这里：

https://github.com/vuejs/vue/blob/fd0eaf92948bb5a4882d538362091fb287d642e3/src/compiler/codegen/events.js#L161

我强烈建议研究genHandler 的来源。 Vue 使用它根据v-on 属性值生成监听函数。

总之，当你写这个时：

@someEvent="handleSomeEvent(参数, 5, 6)"

Vue 会生成这样的处理函数：

function ($event) {
  handleSomeEvent(arguments, 5, 6)
}

然后当您调用$emit 时，您传递给$emit 的参数（除了事件名称）将是传递给此函数的参数。标识符 arguments 的行为就像它在任何其他 JavaScript 函数中一样。

我会注意到，Vue 生成的处理函数的确切形式取决于v-on 属性的形式。它使用一些正则表达式来决定要生成什么类型的处理程序。您可以在 genHandler 中找到所有这些代码。

【讨论】：

感谢您的回答，我会花时间学习genHandler。

【解决方案2】：

Vue emit 就是这样工作的：

vm.$emit(eventName, [...args])

参数将被传递到侦听器的回调函数中。在emitName 之后经过的所有内容都将假定为arguments。这是documentation

【讨论】：