当前位置：首页 > VUE

vue 实现事件委托

2026-03-30 00:49:24VUE

事件委托的原理

事件委托利用事件冒泡机制，将子元素的事件监听绑定到父元素上。通过事件对象的 target 属性判断实际触发事件的子元素，减少重复绑定，提升性能。

vue 实现事件委托

Vue 中实现事件委托的方法

方法一：通过 `v-on` 和事件对象

在父元素上绑定事件，通过 event.target 获取触发事件的子元素，结合条件判断执行逻辑。

vue 实现事件委托

<template>
  <div @click="handleClick">
    <button data-action="save">保存</button>
    <button data-action="delete">删除</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const action = event.target.dataset.action;
      if (action === 'save') {
        this.saveData();
      } else if (action === 'delete') {
        this.deleteData();
      }
    },
    saveData() { /* 逻辑 */ },
    deleteData() { /* 逻辑 */ }
  }
};
</script>

方法二：动态绑定事件处理器

结合 v-for 渲染列表时，直接通过父元素委托事件，避免为每个子项单独绑定。

<template>
  <ul @click="handleItemClick">
    <li v-for="item in items" :key="item.id" :data-id="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ]
    };
  },
  methods: {
    handleItemClick(event) {
      const id = event.target.dataset.id;
      if (id) {
        this.selectItem(id);
      }
    },
    selectItem(id) { /* 逻辑 */ }
  }
};
</script>

方法三：使用事件修饰符优化

通过 Vue 的 .native 或 .stop 等修饰符控制事件冒泡行为，确保委托逻辑的准确性。

<template>
  <div @click.self="handleParentClick">
    <button @click.stop="handleButtonClick">按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('父元素点击');
    },
    handleButtonClick() {
      console.log('按钮点击，阻止冒泡');
    }
  }
};
</script>