这个调调,我感觉挺好用的,可以传递一些额外的参数给函数。参考资料:cn.vuejs.org/api/built-i…
比如说下面这个业务场景:
我们需要对ABC 分别设置点击事件。
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red" id="aaa" @click="myClick">A</view>
<view class="flex-item uni-bg-green" id="bbb" @click="myClick" >B</view>
<view class="flex-item uni-bg-blue" id="ccc" @click="myClick" >C</view>
</view>
myClick代码:
myClick(view){
console.log(JSON.stringify(view))
}
当我们点击了C之后,通过log 可以看到输出了:
{"type":"click","timeStamp":432592.6550000004,"detail":{"x":396,"y":408},"target":{"id":"ccc","offsetLeft":335,"offsetTop":330,"dataset":{},"x":396,"y":408},"currentTarget":{"id":"ccc","offsetLeft":335,"offsetTop":330,"dataset":{}},"touches":[{"identifier":0,"pageX":396,"pageY":408,"clientX":396,"clientY":408,"force":1}],"changedTouches":[{"identifier":0,"pageX":396,"pageY":408,"clientX":396,"clientY":408,"force":1}],"mp":{"@warning":"mp is deprecated","type":"click","timeStamp":432592.6550000004,"detail":{"x":396,"y":408},"target":{"id":"ccc","offsetLeft":335,"offsetTop":330,"dataset":{},"x":396,"y":408},"currentTarget":{"id":"ccc","offsetLeft":335,"offsetTop":330,"dataset":{}},"touches":[{"identifier":0,"pageX":396,"pageY":408,"clientX":396,"clientY":408,"force":1}],"changedTouches":[{"identifier":0,"pageX":396,"pageY":408,"clientX":396,"clientY":408,"force":1}]},"_processed":true}
很关键的一点是:可以获取到id.所以我们可以通过id 去区分这个是哪一个按钮。
如果我们不想写id呢?
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red" id="aaa" @click="myClick(1)">A</view>
<view class="flex-item uni-bg-green" id="bbb" @click="myClick(2)" >B</view>
<view class="flex-item uni-bg-blue" id="ccc" @click="myClick(3)" >C</view>
</view>
我们直接改一下函数调用之后,myClick 打印的就是1,2,3了,看起来是没有任何问题。
如果我想原来事件的函数入参和自定义的入参都同时拥有呢?那就可以用 $event
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red" id="aaa" @click="myClick(1,$event)">A</view>
<view class="flex-item uni-bg-green" id="bbb" @click="myClick(2,$event)" >B</view>
<view class="flex-item uni-bg-blue" id="ccc" @click="myClick(3,$event)" >C</view>
</view>
myClick:
myClick(view,event){
console.log(JSON.stringify(view))
console.log(JSON.stringify(event))
}
$event 感觉会用在列表的item的点击事件里面,通过传入item数据对事件进行强关联吧。