我们经常遇到vue中v-for一个列表,列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听,从性能方面来说是不太好的。那我们我们如何用委托的形式来实现呢。
//html
<table @click="edit">
<tr v-for="item in list">
<td>{{item.name}}</td>
...
<td>
<button :data-id="item.id" title="eidt">编辑</button>
</td>
</tr>
</table>
//js
edit (event){
if(event.target.title == "edit"){ //如果点击到了edit
let id = evenr.target.dataset.id;
//拿着id参数执行着相关的操作
}
}
注意: 因为target是鼠标点击的直接元素哦,所以委托者最好不要有很多子元素。