时间戳

首页 > 解决方案 > 使用 vm.$once() 时，Vue 应用程序如何将附加参数传递给事件侦听器？

vue.js - 使用 vm.$once() 时，Vue 应用程序如何将附加参数传递给事件侦听器？

问题描述

在Vue 应用程序中，它可以添加使用vm.$once调用一次的事件监听器。
例如，在 Vue App 的子组件中，它可以使用vm.$emit('myEvent', data). 发出事件

然后可以通过vm.$once在 Vue 应用程序中将事件侦听器添加到此事件来处理它。
此时，我想将附加数据传递给事件处理程序。

我试过如下。但它会引发错误。

未捕获的 ReferenceError: $event 未定义

    //In the Vueapp
    this.$refs.child.$once(
      'myEvent', this.eventHandler($event, additional_data)
    );

但我认为它可以在使用时传递额外的数据v-on。

  <child-component ref="child" v-on:myEvent="eventHandler($event, additional_data)"></child-component>   
   //$event is the data emitted from the event , "myEvent".

使用vm.$onceorvm.$on时，不能传递附加参数吗？

注意：我使用的原因vm.$once是我想eventHandler在发出自定义事件时只执行一次，myEvent并动态添加它。

标签： vue.jsvuejs2vue-componentvue-events

解决方案

您需要捕获传递给事件处理程序的参数。您可以通过对调用您的方法的处理程序使用匿名函数来执行此操作。例如

this.$refs.child.$once('myEvent', $event => {
  this.eventHandler($event, additional_data)
})

您也可能会喜欢，Function.prototype.bind()但是您必须将参数列表反转为bind前置参数。

例如

methods: {
  eventHandler(data, $event) { // reversed argument list
    // etc
  }
}

和

this.$refs.child.$once('myEvent', this.eventHandler.bind(this, additional_data))

推荐阅读