uni-app中的页面间使用$on与$emit

转载：https://blog.csdn.net/weixin_42292991/article/details/105506501

在页面与页面之间通讯时，很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了，为此uniapp给我们提供了页面与页面之间通讯的极为简便的方法。

比如我在下订单页面的时候需要用户选择一个地址去配送，因此我们需要点击之后跳转到选择收货地址页面。而在选择完了收货地址以后需要关闭那个页面返回该订单页面。因此在该订单页面我们需要开启监听用户选择地址的事件。注意在订单页面卸载的时候也要记得关闭该监听。

下面为订单页面的代码：

onLoad() {//开启监听选择收货地址事件uni.$on('choosePath',(res)=>{this.path = res;})
},//页面卸载onUnload() {//关闭监听选择收货地址事件uni.$off('choosePath',()=>{console.log('关闭监听选择收货地址');})
},methods: {openPathList(){uni.navigateTo({url: '../user-path-list/user-path-list?type=choose'});},
}

下面是选择地址的页面：

onLoad(option) {if(option.type==='choose'){this.isChoose = true}
},methods:{//选择收获地址choosePath(item){if(this.isChoose){//通知订单页面修改地址uni.$emit('choosePath',item)//关闭当前页面uni.navigateBack({delta: 1});}}
}

uni-app中的页面间使用$on与$emit相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
Android精华篇 - App中原生页面 VS H5页面
现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native App(原生app,后面都用"原生ap ...
axure如何实现跳转_Axure中继器实现APP中设置页面的各种列表
中继器是Axure中的一个高级元件,可以当做Axure中的小型数据库使用,用于实现一些增删查改的效果,同时可用于一些具有相同元件组合的组件的快速生成,比如APP中的设置,如下图所示.下面我们介绍一下怎 ...
APP中H5页面实现拨打电话功能
萨瓦迪卡,欢迎大家~~ <a href="tel:400-0000-000">400-0000-000</a>//如失效,就在head标签里加上<me ...
android应用APP中的页面响应时间测试
说明:这里只介绍基本测试逻辑整理出整个APP需要关注的一级页面列表基本工具:ut(内部工具,不便透露细节) 在开发代码中引入TimeProfile类:这个类是ut的最上层,暴露出一些简单的时间打 ...
设计灵感|App中的页面空状态应该如何表现？
什么是空状态? 空状态:顾名思义就是空白的状态,空状态是对没有数据页面的补充,一种对零数据的设计形式(如下图所示:无网络.订单为空.没有关注的人以及无法连接网络等等这些页面就是所谓的"空状态 ...
UI模板素材|教你App中的页面指示器要如何设计
在日常浏览APP的过程中,经常可以看到页面选择器,它们的位置各有不同,样式也多种多样.这篇文章就和大家浅谈一下页面指示器的常见位置及设计样式. 寻呼指示勘探什么是页面指示器通常在 banner或图 ...
App中所有页面添加水印（支持单行和多行）
比较很少见的奇葩功能,给App所有界面添加水印功能.网上有单行,多行的这里为了方便使用,集成了既支持单行又支持多行的功能.废话不多说,直接上代码: 一.工具类 public class Waterma ...

uni-app中的页面间使用$on与$emit

uni-app中的页面间使用$on与$emit相关推荐

最新文章

热门文章