在事件上触发多个方法并传递事件变量

Question

使用 vue，我试图在单击时触发多个事件并传递“事件”变量，以便我可以使用event.target。

我试过了：

<element @click="onSubmit(), onChange()"></element>

在我的方法中，我尝试了

methods: {
    onSubmit(e) {
       console.log(e)
    },

    onChange(e) {
      console.log(e)
    }
}

无法读取未定义的属性“目标”

实现这一目标的正确方法是什么？

Answer 1

在您的模板中

<element @click="onClick"></element>

在方法中

methods: {
    onSubmit(e) {
       console.log(e)
    },

    onChange(e) {
      console.log(e)
    },

    onClick(e){
      this.onSubmit(e)
      this.onChange(e)
    }
}

当没有提供参数时，event 始终是事件处理程序的第一个参数。或者，您可以在模板中使用$event 来引用当前事件。

<element @click="onClick($event)"></element>

我想还应该注意event 是一个全局变量，并且可以在被调用的两个函数中访问，而无需传递。

methods: {
    onSubmit() {
       console.log(event.target) // will log the element that was clicked
    },

    onChange() {
      console.log(event.target) // will log the element that was clicked
    },

    onClick(){
      this.onSubmit()
      this.onChange()
    }
}