uniapp中$emit,$on,跳转页面时的使用方法

本文介绍了 uni.navigateTo 的使用方法,特别是在版本2.8.9+中的支持情况。通过success回调函数处理页面跳转成功后的操作,例如接收上个页面传递的数据。示例代码展示了如何在目标页面接收并使用来自上一页面的对象数据。

goto(){
// 我们发的值一般是都是data区域的
uni.navigateTo({
url:/pages/index/test, //建议这么写
// 版本2.8.9+ 支持
success:(res)=>{
/*/ 和平时使用其实没差什么,但是这种方式是可以的 这里不是KaTeX parse error: Expected 'EOF', got '}' at position 82: …info }) }̲ }) } test.…on
this.page.on(‘sendTestValue’,(data)=>{
// 这是data 就是上个页面传递的对象了
})
}

<think> 嗯,用户想了解uni-app中uni.$emit使用方法。这属于组件间通信的范畴,uni-app提供了几种方案,uni.$emit系列是其中一种基于事件的通信方式。 从引用内容看,引用[1]明确提到了uni.$emit系列API,说明这是官方推荐的跨组件通信方案之一。用户可能正在开发需要组件交互的功能,比如页面跳转传值或跨层级组件触发动作。 用户没有说明具体场景,但根据经验,常见的使用场景包括:页面返回刷新数据、跨tabbar页面更新状态、非父子组件间联动等。uni.$emit的优势在于解耦,但需要注意避免滥用导致事件混乱。 在回答,我会重点说明核心API的配合使用uni.$emit触发事件,uni.$on监听事件,uni.$once单次监听,uni.$off移除监听。特别要强调页面生命周期内的事件清理,这是容易内存泄漏的点。 用户可能遇到的坑是:nvue页面vue页面的事件差异(引用[2]提及nvue渲染机制不同)、H5端页面销毁自动移除监听而App端不会(需主动uni.$off)、事件命名冲突等。这些实际经验要融入最佳实践部分。 可以给出电商场景的典型示例,比如商品详情页触发购物车更新事件,购物车页面监听后刷新数据。这样用户更容易理解应用场景。代码示例要区分普通vue页面和nvue页面的不同写法(引用[4]提到规范差异)。 最后要提醒性能优化:高频事件(如滚动)不适合用事件总线,复杂数据传递推荐Vuex/Pinia(引用[1]对比过方案)。如果用户后续问及深度性能优化,可以再展开状态管理库的方案。 </think> 以下是 `uni.$emit` 在 UniApp 中的使用指南及注意事项,结合官方规范和最佳实践整理: --- ### **一、核心 API 功能** | API 方法 | 作用 | 使用场景 | |----------------|-----------------------------|----------------------------| | `uni.$emit(event, data)` | 触发全局自定义事件,携带数据 | 发送数据到监听方 | | `uni.$on(event, callback)` | 监听全局事件,接收数据后执行回调 | 接收数据并处理 | | `uni.$once(event, callback)` | 仅监听一次事件,触发后自动移除监听 | 单次传递(如页面跳转参数) | | `uni.$off(event, callback)` | 移除事件监听 | 避免内存泄漏(页面卸载必需) | --- ### **二、使用步骤示例** #### 1. **发送事件方**(如页面 A) ```javascript // 触发名为 'updateCart' 的事件,传递购物车数据 uni.$emit('updateCart', { goodsId: 1001, count: 3 }); ``` #### 2. **接收事件方**(如页面 B) ```javascript export default { mounted() { // 监听 'updateCart' 事件 uni.$on('updateCart', this.handleCartUpdate); }, methods: { handleCartUpdate(data) { console.log('收到数据:', data); // { goodsId: 1001, count: 3 } // 更新购物车逻辑... } }, beforeDestroy() { // 页面卸载移除监听!避免内存泄漏 [^1] uni.$off('updateCart', this.handleCartUpdate); } } ``` #### 3. **单次监听场景** ```javascript // 只接收一次支付结果通知 uni.$once('payResult', (res) => { if (res.success) { uni.showToast({ title: '支付成功' }); } }); ``` --- ### **三、关键注意事项** 1. **事件命名冲突** - 建议使用模块前缀:`userLoginSuccess` 而非 `loginSuccess` - 避免与原生事件(如 `onLaunch`)重名 2. **数据传递限制** - 仅支持**可序列化数据**(JSON 支持的类型) - 传递函数或循环引用对象会失效 3. **nvue 页面差异** - nvue使用 `weex` 的 `globalEvent` 模块(与 `uni.$emit` 不互通)[^2] 4. **生命周期管理** - 监听必须在 **页面/组件卸载手动移除**(`onUnload` 或 `beforeDestroy`)[^1] - 未移除会导致重复触发和内存泄漏 5. **性能优化** - 高频事件(如滚动)避免用事件总线,推荐 `props` 或 `Vuex/Pinia`[^1] - 大数据量使用状态管理库(Vuex/Pinia)更高效 --- ### **四、适用场景 vs 不适用场景** | **推荐场景** | **不推荐场景** | |---------------------|---------------------| | 跨页面通信(如 A 页触发 B 页刷新) | 父子组件通信(优先用 `props`/`$emit`) | | 全局通知(如登录状态变更) | 高频数据同步(如实坐标) | | 解耦复杂组件交互 | 深层嵌套组件间通信 | --- ### **五、完整示例:跨页面更新用户信息** #### 用户中心页(触发事件) ```javascript // 修改用户名后通知其他页面 uni.$emit('userInfoChanged', { name: '张三' }); ``` #### 订单页(监听事件) ```javascript export default { mounted() { uni.$on('userInfoChanged', this.refreshOrderList); }, methods: { refreshOrderList(userInfo) { console.log('新用户名:', userInfo.name); this.fetchOrders(); // 重新拉取订单 } }, beforeDestroy() { uni.$off('userInfoChanged', this.refreshOrderList); } } ``` --- ### **常见问题排查** 1. **事件未触发?** - 检查事件名拼写一致性(区分大小写) - 确认接收方已先执行监听(`uni.$on` 需在 `uni.$emit` 前注册) 2. **H5 正常但 App 异常?** - nvue 页面需改用 `globalEvent` 模块 [^2] - 检查 App 端是否启用调试模式(`manifest.json` → `debug:true`) 3. **多次触发?** - 监听未移除导致重复绑定 → 务必在生命周期销毁阶段调用 `uni.$off` > 提示:复杂项目建议使用 **Pinia** 管理全局状态([引用 1] 对比方案)[^1][^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值