UniApp Vue3事件适配与兼容方案

1. Vue2 与 Vue3 事件机制的核心区别

• Vue2：

  • 通过 this.$emit('event') 触发自定义事件，父组件用 @event 监听。

  • .native 修饰符用于监听原生 DOM 事件（如 @click.native）。

• Vue3：

  • 移除 .native，改为通过 emits 选项声明自定义事件。

  • 未声明的事件监听器 会作为原生事件绑定到组件的根元素（通过 $attrs），可能导致意外行为。

2. 不注册 emits 的影响

未声明的事件 会被当作原生事件处理，绑定到根元素。
问题示例：

<!-- 子组件未声明 emits: ['click'] -->
<template><button @click="$emit('click')">按钮</button>
</template><!-- 父组件 -->
<Child @click="handleClick" />

点击按钮会触发 两次 handleClick：

1. 子组件 $emit('click') 触发的自定义事件。

2. 根元素的原生 click 事件（因未声明 emits，@click 被绑定到根元素）。

3. 适配方