Vue 中解释 JS 事件委托模型？

在 Vue 中，事件委托模型是一种利用事件冒泡机制的技术，通过在父元素上监听事件，利用事件冒泡的特性来处理子元素的事件。

在 Vue 中，你可以使用 v-on 指令（或简写为 @）在父元素上监听事件，然后利用事件冒泡原理来处理子元素的事件。当子元素触发事件时，事件会沿着 DOM 树向上传播，如果父元素上定义了对应的事件处理程序，那么父元素上的处理函数就会被触发。

示例：

<template>
  <div @click="handleClick">
    <button>Click me</button>
    <button>Or me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      // event.target 指向被点击的实际元素
      console.log('Clicked:', event.target);
    }
  }
}
</script>

在这个例子中，点击任何一个 <button> 元素都会触发父元素 <div> 上定义的 handleClick 方法。这样就利用了事件委托的思想，将事件处理集中在父元素上，减少了事件处理程序的数量，提高了性能。