Vue巧用事件委托

我们经常遇到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是鼠标点击的直接元素哦,所以委托者最好不要有很多子元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,641评论 2 10
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,109评论 4 129
  • 曾经以为人只要变得有钱以后,他/她做事方式、接人待物、性格、情商等等都会随之来一个大的转变。但最近接触的一些人一些...
    弗兰克阅读 4,465评论 16 164
  • 现在节日真多,传统的不算,刚刚送走了母亲节,父亲节又姗姗来临。以前没有听过这样的节日,像我的老父亲直到去世也...
    拜石阅读 292评论 0 0