UniApp Vue3事件适配与兼容方案

原创

于 2025-08-09 15:37:48 发布 · 856 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

1. UniApp Vue3事件适配与兼容方案

uniapp $emit 是用于触发全局自定义事件的方法。
在 UniApp 中，uni.$emit 是一个非常有用的工具，它允许你在不同的页面或组件之间进行通信。具体来说，它可以触发全局的自定义事件，这些事件可以被任何组件或页面监听到。当你使用 uni.$emit 时，你可以指定一个事件名和一些附加参数。这些参数将会被传递给所有监听了这个事件的回调函数。

1.1. Vue2 与 Vue3 $emit 对比

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

1.1.1. Vue2

（1）通过 this.$emit(‘event’) 触发自定义事件，父组件用 @event 监听。
（2）.native 修饰符用于监听原生 DOM 事件（如 @click.native）。

1.1.2. Vue3

（1）移除 .native，改为通过 emits 选项声明自定义事件。
（2）未声明的事件监听器会作为原生事件绑定到组件的根元素（通过 $attrs），可能导致意外行为。

1.1.3. 不注册 emits 的影响

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

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

点击按钮会触发两次 handleClick：
（1）子组件 $emit(‘click’) 触发的自定义事件。
（2）根元素的原生 click 事件（因未声明 emits，@click 被绑定到根元素）。

1.2. Vue2 $emit

在 Vue 2 中，$emit 是组件实例方法，用于触发当前实例上的事件。它接收两个参数：事件名称和可选的数据：

this.$emit('eventName', eventData);

当 $emit 被调用时，它会向父级组件触发一个自定义事件，并传递一个可选的数据对象。子组件可以使用 v-on 指令监听这些自定义事件。

<!-- Child.vue -->
<template>
  <button @click="onClick">Click me!</button>
</template>

<script>
export default {
   
   
  methods: {
   
   
    onClick() {
   
   
      // 触发 custom-event 事件，并传递一个数据对象
      this.$emit('custom-event', {
   
    message: 'Hello, world!' });
    }
  }
}
</script>

<!-- Parent.vue -->
<template>
  <child-component @custom-event="onCustomEvent"></child-component>
</template>

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

export default {
   
   
  components: {
   
    Child },
  methods: {
   
   
    onCustomEvent(data) {
   
   
      console.log(data.message); // Hello, world!
    }
  }
}
</script>

1.3. Vue3 $emit

在 Vue 3 中，$emit 已经被废弃了，官方推荐使用 emits 选项来声明组件可触发的事件。
emits 选项是一个数组，包含一个或多个事件名称。每个事件名称可以是一个字符串或者一个对象，对象包含了事件名称、参数和可选的修饰符。

<!-- Child.vue -->
<template>
  <button @click="onClick">Click me!</button>
</template>
<script>
export default {
   
   
  emits: ['custom-event'],
  methods: