uniapp事件介绍
uniapp事件概述
在uniapp中，事件是组件间通信的重要机制，允许子组件向父组件传递数据或触发行为。事件通过v-on或@指令绑定，支持原生DOM事件和自定义事件。
事件绑定语法
- 原生DOM事件：直接绑定到DOM元素，如点击事件。
<button @click="handleClick">点击</button> - 自定义事件：通过
$emit触发，父组件监听。<!-- 子组件触发 --> <button @click="$emit('customEvent', data)">触发事件</button> <!-- 父组件监听 --> <child-component @customEvent="handleCustomEvent"></child-component>
事件修饰符
uniapp支持Vue的事件修饰符，简化事件处理逻辑：
.stop：阻止事件冒泡。.prevent：阻止默认行为。.capture：使用捕获模式。.self：仅当事件从元素本身触发时回调。.once：事件只触发一次。<button @click.stop="handleClick">阻止冒泡</button>
事件传参
通过$emit传递参数，父组件在方法中接收：
<!-- 子组件 -->
<button @click="$emit('submit', { id: 1, name: 'uniapp' })">提交</button>
<!-- 父组件 -->
<child-component @submit="handleSubmit"></child-component>methods: {
handleSubmit(data) {
console.log(data); // { id: 1, name: 'uniapp' }
}
}跨组件事件通信
对于非父子组件通信，可使用uni.$emit和uni.$on全局事件机制：
// 发送事件
uni.$emit('globalEvent', { message: '全局事件' });
// 监听事件
uni.$on('globalEvent', (data) => {
console.log(data.message); // '全局事件'
}); 注意事项
- 避免滥用全局事件，防止内存泄漏。组件销毁时需调用
uni.$off移除监听。 - 自定义事件名建议使用kebab-case（如
custom-event），避免与原生事件冲突。 - 小程序端部分原生事件（如
input、tap）需使用特定语法，需参考平台文档。
