Vue事件委托

最新推荐文章于 2024-09-30 03:35:25 发布

zhangxlY~

最新推荐文章于 2024-09-30 03:35:25 发布

阅读量1.8k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_57142556/article/details/117404482

版权

本文介绍了Vue中事件委托的概念及其优势，如减少事件注册。通过一个列表示例展示了如何实现事件委托：在每个列表项上绑定自定义属性，并在父元素上设置点击事件，利用事件对象获取自定义属性值。这种方法在处理大量动态生成的元素时尤其有用。

摘要由CSDN通过智能技术生成

Vue事件委托

①事件委托:是把子元素的事件委托给父元素去处理;

②事件委托的好处:可以减少事件注册;

③使用事件委托:

事件委托一般都是使用在列表里的,以下用列表举例：

(1)首先在每一个循环的标签上动态绑定一个自定义属性;

(2)之后给统一的父元素绑定事件;

(3)在事件中通过事件对象,获取自定义属性的值:

<template>
  <div class="home">
      <ul @click="click">
        <li v-for="(item,index) in 100" :key="item" v-bind:data-index="index">{{item}}</li>
        <-- data-自定义属性名="值" -->
      </ul>
  </div>
</template>

<script>


export default {
  methods:{
    click(e){
      console.log(e.target.dataset.index);
      // 获取是通过  e.target.dataset.自定义属性名
      
    }
  },
}
</script>

如果事件需要传参、还需要用到事件对象,这时我们传入的第一个实参就是事件对象,事件对象使用 $event 来传入;