当前位置：首页 > VUE

vue实现事件代理

2026-01-18 00:01:09VUE

事件代理的概念

事件代理（Event Delegation）是一种利用事件冒泡机制，将子元素的事件委托给父元素统一处理的技术。在Vue中，可以通过v-on指令或$on方法实现事件代理，减少事件监听器的数量，提升性能。

vue实现事件代理

Vue中实现事件代理的方法

使用`v-on`指令

通过v-on在父元素上绑定事件，结合事件对象的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.save();
      } else if (action === 'delete') {
        this.delete();
      }
    },
    save() {
      console.log('保存操作');
    },
    delete() {
      console.log('删除操作');
    }
  }
};
</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>

使用`$on`方法

通过$on在父组件监听子组件事件，适用于组件层级较深的场景。

<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(payload) {
      console.log('接收到子组件事件:', payload);
    }
  }
};
</script>