vue基础知识(一)——事件函数参数传递

事件绑定

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