vue 事件委托写法

在Vue中，可以使用事件委托来处理事件。事件委托是利用事件冒泡的原理来实现的。事件冒泡是指事件从最深的节点开始，然后逐步向上传播事件。在Vue中，事件委托的写法如下：
1. 首先，在需要委托事件的父元素上使用`@事件名`来监听事件，如`@click`。
2. 在监听事件的方法中，使用特殊变量`$event`来传递事件对象。在方法内部可以通过`$event`来访问事件对象的属性和方法。
3. 在方法中，可以通过判断`$event.target`来获取触发事件的具体元素，从而实现事件的委托。
下面是一个示例代码：

<template>
  <div @click="handleClick">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick($event) {
      if ($event.target.tagName === 'BUTTON') {
        // 处理按钮点击事件
        console.log('点击了按钮', $event.target.innerText);
      }
    }
  }
}
</script>

在上述示例中，父元素div上使用`@click`监听点击事件。在`handleClick`方法中，通过`$event.target`获取到触发事件的具体元素，判断是否是按钮元素，然后进行相应的处理。这样就实现了事件委托的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue 中怎么用事件委托](https://blog.csdn.net/xiubinxu/article/details/107035573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue中事件委托](https://blog.csdn.net/weixin_57994974/article/details/117399469)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]