vue2和vue3的事件代理

Vue 2和Vue 3在事件代理方面有一些细微的差异。让我来为你解释一下。

在Vue 2中，事件代理是通过子组件中的事件侦听器实现的。父组件可以使用`v-on`指令（或简写`@`）来监听子组件派发的事件。子组件需要使用`$emit`方法来触发事件，并传递相应的参数。父组件中的事件处理函数会接收到这些参数。

例如，在父组件中监听子组件派发的事件可以这样写：

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

<script>
export default {
  methods: {
    handleEvent(payload) {
      // 处理事件
    }
  }
}
</script>

而在Vue 3中，事件代理的语法略有不同。现在，父组件可以直接在子组件上使用原生的事件监听器，就像在普通的HTML元素上一样。你可以使用`v-on`指令（或简写`@`）来监听子组件派发的事件，而不需要在子组件中显式地定义一个事件侦听器。

以下是在Vue 3中监听子组件事件的示例：

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

<script>
export default {
  methods: {
    handleEvent(payload) {
      // 处理事件
    }
  }
}
</script>

需要注意的是，Vue 3中的事件代理语法更贴近于原生浏览器事件的处理方式，而Vue 2中的事件代理则是通过子组件自己实现事件的派发和侦听。这是Vue 3对事件系统进行了一些改进的一部分。