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

Posted 2023-02-22

【中文标题】在事件上触发多个方法并传递事件变量

【英文标题】：Trigger multiple methods on event and pass event variable

【发布时间】：2018-01-25 05:43:21

【问题描述】：

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

我试过了：

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

在我的方法中，我尝试了

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

    onChange(e) 
      console.log(e)
    

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

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

【参考方案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()