事件绑定

1.事件函数的调用方式
  • 直接绑定函数名称<button @click='say'></button>
  • 调用函数<button @click='say()'></button>
2.事件函数参数传递

如果我们绑定的事件函数需要传参的话,通常使用的是直接调用的say()方式。

  • 普通参数和事件对象<button @click='say(“hello”,$event)'></button>
    其中vue中的事件对象就是固定的$event

  • 写法一:默认情况下,第一个参数就是事件对象$event

template中:
@click='handle' 

methods中:
handle:function(event){
  console.log(event.target.innerHTML)
}
  • 写法二:不管是有一个参数还是多个参数,最后一个参数一定是事件对象$event
template中:
@click='solve(123,245,$event)'

methods中:
solve:function(p1,p2,event){
  console.log(event.target.innerHTML)
  console.loh(event.target.tagName)
}
总结

事件绑定—参数传递

  1. 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
  2. 如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
Logo

前往低代码交流专区

更多推荐