uniapp事件介绍

uniapp事件介绍

uniapp中的事件系统基于Vue.js的事件机制，允许开发者在组件间进行通信或响应用户交互。以下是uniapp中常见的事件类型和使用方法。

事件绑定与触发

在uniapp中，事件通过@或v-on指令绑定到组件上。例如，绑定一个点击事件：

<button @click="handleClick">点击按钮</button>

在对应的Vue实例中定义事件处理函数：

methods: {
  handleClick(event) {
    console.log('按钮被点击', event);
  }
}

常见事件类型

uniapp支持多种原生事件，包括但不限于：

• 点击事件：@click
• 触摸事件：@touchstart、@touchmove、@touchend
• 表单事件：@input、@change、@submit
• 生命周期事件：@load、@ready、@error（部分组件特有）

自定义事件

uniapp支持通过$emit触发自定义事件，实现子组件向父组件通信。例如： 子组件触发事件：

this.$emit('customEvent', { data: '传递的数据' });

父组件监听事件：

<child-component @customEvent="handleCustomEvent"></child-component>

父组件中定义处理函数：

methods: {
  handleCustomEvent(data) {
    console.log('接收到子组件数据', data);
  }
}

事件修饰符

uniapp支持Vue的事件修饰符，用于简化事件处理逻辑。常见修饰符包括：

• .stop：阻止事件冒泡
• .prevent：阻止默认行为
• .capture：使用捕获模式
• .self：仅当事件从自身触发时调用

示例：

<button @click.stop="handleClick">阻止冒泡</button>

注意事项

• 事件处理函数中的event对象包含原生事件信息，但部分平台可能存在差异。
• 自定义事件名建议使用kebab-case（短横线分隔）命名，避免与原生事件冲突。
• 跨组件通信时，复杂场景建议使用Vuex或全局事件总线。