当前位置：首页 > VUE

vue实现事件代理

2026-03-10 05:45:44VUE

Vue 中实现事件代理的方法

事件代理（Event Delegation）是一种通过将事件监听器绑定到父元素而非每个子元素来提高性能的技术。Vue 提供了多种方式实现事件代理。

使用 `v-on` 指令和事件冒泡

通过 Vue 的 v-on 指令在父元素上监听事件，利用事件冒泡机制捕获子元素触发的事件。

<template>
  <div @click="handleClick">
    <button data-action="save">Save</button>
    <button data-action="delete">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() {
      console.log('Save action triggered');
    },
    delete() {
      console.log('Delete action triggered');
    }
  }
};
</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: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    handleItemClick(event) {
      const id = event.target.dataset.id;
      if (id) {
        console.log(`Item ${id} clicked`);
      }
    }
  }
};
</script>

使用事件修饰符

Vue 提供了事件修饰符（如 .stop、.prevent）来简化事件处理逻辑。

vue实现事件代理

<template>
  <div @click.self="handleSelfClick">
    <button @click="handleButtonClick">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
    handleSelfClick() {
      console.log('Div clicked (self)');
    }
  }
};
</script>