uni.$emit()和uni.navigateBack()区别

最新推荐文章于 2025-12-31 10:20:39 发布
原创 最新推荐文章于 2025-12-31 10:20:39 发布 · 156 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

  1. 导航执行时机：当你在uni.$emit()之后立即调用uni.navigateBack()，Vue 可能还在处理事件监听器中的代码或等待 DOM 更新，此时页面已经开始卸载，导致一些操作无法完成。

  2. 页面栈状态：uni.navigateBack()会立即修改页面栈，而事件监听器中的代码可能依赖于当前页面存在。如果页面已经从栈中移除，事件处理可能会中断。

精通UniApp页面间通信：uni.$once和uni.$emit的神奇应用技巧
nbsaas-boot基于Request-Response的企业级快速开发框架
04-22 2921
UniApp作为一款多端开发框架，其页面间的通信对于构建丰富交互体验至关重要。本文将探讨UniApp中使用uni.$on和uni.$emit实现页面间通信的技巧，并展示两个精彩例子，帮助你更好地理解和应用这些技术。
uniapp页面间通信uni.$on与通过uni.navigateTo中eventChannal的方式的区别
u014642921的博客
06-26 318
【代码】uniapp页面间通信uni.$on与通过uni.navigateTo中eventChannal的方式的区别。
uniapp全局传参 uni.$on uni.$emit(‘updateBack‘
qq_42351675的博客
12-10 1144
【代码】uniapp全局传参 uni.$on uni.$emit(‘updateBack‘
关于uniApp组件通知uni.$emit $on
m178398家里有只小肥猫
09-11 139
【代码】关于uniApp组件通知uni.$emit $on。
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑
热门推荐
一起来讨论学习前端技术吧
09-05 3万+
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑
uniapp中使用uni.$emit和uni.$on在vue和nvue页面之间传值但是无法赋值的问题
m0_60817860的博客
09-11 1291
背景：我们在vue页面和nvue页面之间进行传值可以使用uni.$emit和uni.$onsh事件监听实现，官网描述：uni-app官网 (dcloud.net.cn)
uni.$emit与uni.$on
qq_45141428的博客
03-21 1341
uni.$emit( event, arg ) //触发当前实例上的事件 uni.$on( event, fn );//监听event事件后运行 fn； 要明确一点就是on是开启一个监听，只有emit触发后便会调用emit中的fn方法 如用uni.$emit与uni.$on控制页面刷新 onLoad() { this.getData(); //创建一个refreshData事件的监听，当emit触发时便会调用this.getData(); uni.$on('refreshData',() =&gt.
uniapp 使用uni.$emit()和uni.$on() 进行页面间通讯
qq_37496470的博客
12-21 2817
uni.$emit("name", data); uni.navigateBack(); uni.$on("name", res => { // 清除监听 uni.$off('name'); })
uni.$on,uni.$emit页面通讯，组件通讯
weixin_46899191的博客
04-09 424
uni.$on和uni.$emit，页面或组件通讯，相互传数据
使用uni.$emit()以及uni.$on()进行页面传参以数据无法渲染的问题
weixin_45865350的博客
02-10 897
使用uni.$emit()以及uni.$on()进行页面传参以数据无法渲染的问题
[uniapp] uview(1.x) 二次封装u-navbar 导致 :custom-back函数this.$emit / this.$props失效问题处理
iOSTianNan的博客
08-11 1975
uniapp 项目: 使用了uview框架 1.x版本其中对于组件 u-navbar , 想要进行二次简单封装,把一些固定样式/固定配置等预写好, 同时对默认的返回按钮做一层前置拦截,方便后续扩展.一圈搞下来, 我们有了两种解决办法方案2.3和方案3至此,对于uview(1.x)的组件u-navbar的二次封装中遇到的自定义事件的处理, 也算完成.至于选择 上面哪两种方案?我从封装的角度出发, 我会采用方案2.3毕竟, 二次封装也是为了后续使用方便, 还是延用u-navbar。
if ( this.list.approvalOpinions ) { if ( this.list.opinion == 'DISAGREE' ) { // 拒绝接口 addSupervisingApproval( this.list ).then( ( response ) => { if ( response.code == 200 ) { uni.$u.toast( '操作成功' ); this.$emit( 'update:show', false ); uni.navigateBack( { delta: 1 } ); //关闭当前页面，返回上一页面或多级页面。 } } ).catch( ( e ) => { uni.$u.toast( '操作失败' ); this.$emit( 'update:show', false ); } ); } else if ( this.list.opinion == 'AGREE' ) { // 同意接口 addSupervisingCompletion( this.list ).then( ( response ) => { if ( response.code == 200 ) { uni.$u.toast( '操作成功' ); this.$emit( 'update:show', false ); uni.navigateBack( { delta: 1 } ); //关闭当前页面，返回上一页面或多级页面。 } } ).catch( ( e ) => { uni.$u.toast( '操作失败' ); this.$emit( 'update:show', false ); } ); } } else { uni.$u.toast( '请输入批复意见' ); } 优化代码
08-19
uni.navigateBack({ delta: 1 }); // 返回上一页 } }) .catch((e) => { uni.$u.toast('操作失败'); this.$emit('update:show', false); }); } } else { uni.$u.toast('请输入批复意见'); } ``` --- ### ...
const api = this.$route.query.data ? installDetailUpdatePost : installDetailAdd api(this.form).then(res => { uni.showToast({ title: '提交成功', icon: 'none', mask: !0 }) uni.$emit('refresh') // setTimeout(() => { // uni.navigateBack() // }, 1500); this.$router.push('/pages/equipmentInstall/check/index') }).catch(e => uni.hideLoading())解释代码
06-06
如果提交成功，则会弹出一个提示框，提示提交成功，并通过 `uni.$emit` 触发一个 `refresh` 事件，最后通过 `$router.push` 方法跳转到设备安装的审核页面。如果提交失败，则会隐藏 loading 动画。 值得注意的是，...
微前端系列：核心概念、价值与应用场景
李刚的学习专栏
12-30 651
微前端是一种将大型Web应用拆分为多个独立子应用的技术架构，核心思想是"分而治之"。它允许不同团队使用不同技术栈（如Vue、React）独立开发、测试和部署子应用，通过主应用进行整合，为用户提供统一体验。微前端主要解决团队协作阻塞、技术栈锁定、系统升级困难等问题，适用于大型中后台系统、多团队协作项目和遗留系统重构等场景。其核心能力包括子应用的动态加载/卸载、独立运行隔离、路由状态保持以及应用间通信机制。微前端通过JS/CSS隔离、沙箱技术等手段确保系统稳定性，同时支持渐进式重构，是复杂前端系统的有效架构方案
零基础搭建完成完整的前后端分离项目的准备工作
2401_87199769的博客
12-30 723
搭建完成一个完整的项目需要准备哪些东西？下面就根据我自己的项目经历，分享如何从 0 开始，搭建一个完整的前后端分离项目。既然是一个前后端分离项目，我们就需知道前端是什么？后端是什么？前后端如何协作？，全称，是软件开发中负责的部分，简单来说就是用户打开网站、App 时能看到、能点击、能操作的所有内容。，全称，是软件开发中负责的部分，相当于整个软件的 “幕后大脑”，支撑着前端的所有交互功能正常运转。
前端 HTML 入门（标签）
最新发布
0.0的博客
12-31 588
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，它不是编程语言，而是标记语言，通过一系列标签描述网页的结构和内容。
vue前端面试指南
chaopingyao的博客
12-30 570
生命周期钩子是 Vue 组件在不同阶段执行的函数。1、 创建期间的生命周期函数：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。：此时已经完成了模板的编译，但是还没有挂载到页面中。mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示，DOM 已渲染。2、运行期间的生命周期函数。
无需公网 IP 也能全球访问本地服务？cpolar+Spring Boot+Vue应用实践！
YUAN_XU_CHENG的博客
12-30 901
cpolar是一款跨平台内网穿透工具，支持Windows、macOS、Linux等系统，可将本地服务（如Web服务器、SSH等）安全映射到公网。它无需公网IP或路由器配置，提供HTTPS加密和临时/固定域名选项，适用于项目演示、NAS共享等场景。本文以Spring Boot 2 + Vue 3项目为例，展示如何通过cpolar实现前端公网访问，同时保持后端本地运行。教程涵盖环境准备、项目启动、前端代理配置等步骤，解决跨域问题，实现安全便捷的HTTPS全栈部署。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿凤21

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值