当前位置：首页 > VUE

vue如何实现事件委托

2026-01-22 20:32:10VUE

Vue 中实现事件委托的方法

事件委托是一种利用事件冒泡机制将子元素的事件处理委托给父元素的优化技术。Vue 中可以通过以下几种方式实现：

vue如何实现事件委托

使用 `v-on` 和事件修饰符

通过 v-on 指令在父元素上绑定事件，结合事件修饰符（如 .native 或自定义事件）实现委托：

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.save();
      } else if (action === 'delete') {
        this.delete();
      }
    },
    save() { /* ... */ },
    delete() { /* ... */ }
  }
}
</script>

动态事件绑定

对于动态生成的子元素，可以通过动态绑定事件并利用事件冒泡实现委托：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' }
      ]
    };
  },
  methods: {
    handleItemClick(event) {
      const id = event.target.dataset.id;
      if (id) {
        console.log('点击的项ID:', id);
      }
    }
  }
}
</script>

自定义指令实现委托

通过自定义指令封装事件委托逻辑，提高复用性：

<template>
  <div v-event-delegate="'click', '.btn', handleBtnClick">
    <button class="btn" data-action="save">保存</button>
    <button class="btn" data-action="delete">删除</button>
  </div>
</template>

<script>
export default {
  directives: {
    eventDelegate: {
      inserted(el, binding) {
        const [eventType, selector, handler] = binding.value;
        el.addEventListener(eventType, (event) => {
          if (event.target.matches(selector)) {
            handler(event);
          }
        });
      }
    }
  },
  methods: {
    handleBtnClick(event) {
      const action = event.target.dataset.action;
      console.log('触发动作:', action);
    }
  }
}
</script>