位置: IT常识 - 正文

[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案)

编辑:rootadmin

推荐整理分享[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp跨平台,uniapp 页面之间传递数据,uniapp跨端,uniapp跨端,uniapp页面间传值,uniapp跨端,uniapp页面间传值,uniapp 跨页面传值,内容如对您有帮助,希望把文章链接给更多的朋友!

uni.$emit 和 uni.$on 是uniapp自带的跨页面传值   

vue 父子通讯可以用 props  this.$emit   这种简单的父子通讯紧适用于 页面和组件 或者 组件之间的传值,他并不适用于页面和页面的互相传值

那要实现页面通讯呢,我们一起来看看uni.$emit 和 uni.$on的使用方法

示例:

        A页面在 onload 中使用   uni.$on('自定义名称',function(data){}   接收   data为接收到的值

        B页面在事件中  使用    uni.$emit('自定义名称',{属性名称 : 属性值}) 并搭配使用 uni.navigateBack 跳回A页面     A页面的自定义名称要和B页面的自定义名称相同

代码:

        A    页面

// A 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 B 页面传过来的值 )} },}

        B   页面

// B 页面export default { data(){ return{ listData:[1,2,3,4,5] }; }, methods:{ jump(){ uni.$emit('add',{listData:this.listData}) uni.navigateBack({ delta: 1 }); }, },}

这样就实现的页面和页面之间的通讯    

[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑(uniapp跨域解决方案)

但是  但是  但是 (重点!!!敲黑板)

 uni.$emit 和 uni.$on 都属于全局跨页面传参

所以在A页面  在 onUnload 周期 添加移除监听事件

  uni.$off('自定义名称');

// A 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 B 页面传过来的值 )} }, onUnload() { // 移除监听事件 uni.$off('add'); },}

以上就解决了uniapp 跨页面传参

下面和大家分享一下  博主在使用uni.$emit 和 uni.$on 遇到的大坑

A页面 和 B 页面同时都 调用了 C页面 并且使用了uni.$on 并且名字是一样的

C页面 返回是方法  使用了  uni.$on 同时也使用了 uni.navigateBack 

A页面代码   

// A 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 C 页面传过来的值 )} }, onUnload() { // 移除监听事件 uni.$off('add'); }, methods:{ // A 页面 跳转B页面 jumpB(){ uni.navigateTo({ url:'B' }) }, // A 页面 跳转C页面 jumpC(){ uni.navigateTo({ url:'C' }) }, },}

B页面代码

// B 页面export default { data(){ return{ }; }, onload(){ uni.$on('add',function(res){ console.log(res.listData) // 为 C 页面传过来的值 )} }, onUnload() { // 移除监听事件 uni.$off('add'); }, methods:{ // B 页面 跳转C页面 jumpC(){ uni.navigateTo({ url:'C' }) }, },}

C 页面

// C 页面export default { data(){ return{ listData:[1,2,3,4,5] }; }, methods:{ jump(){ uni.$emit('add',{listData:this.listData}) uni.navigateBack({ delta: 1 }); }, },}

  当A页面跳B页面   B页面跳到C页面          在A页面跳转到B页面然后B页面跳转到C页面  C页面修改完数据之后 AB页面的值都发生了改变

解决方法:AB页面的名称都一样   所以数据渲染混乱   这个时候把名字改成对应的就好了,

创作不易   如果对您有帮助 请留下赞再走吧

本文链接地址:https://www.jiuchutong.com/zhishi/297282.html 转载请保留说明!

上一篇:Cursor!!!GPT-4帮我写代码

下一篇:谷歌浏览器被hao123网页(或其他网页)劫持了,怎么办?(已解决)(谷歌浏览器被hao123锁定改不了)

  • win10配置需求(windows配置要求)

    win10配置需求(windows配置要求)

  • 红米note8pro90hz如何打开(红米note8pro怎么开启90hz屏幕刷新率)

    红米note8pro90hz如何打开(红米note8pro怎么开启90hz屏幕刷新率)

  • 荣耀20pro屏幕刷新率是多少HZ(荣耀20pro刷emui)

    荣耀20pro屏幕刷新率是多少HZ(荣耀20pro刷emui)

  • 抖音一小时多少流量正常(抖音一小时多少钱)

    抖音一小时多少流量正常(抖音一小时多少钱)

  • 微信如何发超过5分钟的视频(微信如何发超过200的红包)

    微信如何发超过5分钟的视频(微信如何发超过200的红包)

  • 淘宝买东西好友会看见吗(淘宝买东西好友能看到吗)

    淘宝买东西好友会看见吗(淘宝买东西好友能看到吗)

  • 电热管的接法(电热管接法图片)

    电热管的接法(电热管接法图片)

  • iphone慢动作怎么调速度快慢(iphone慢动作怎么调速)

    iphone慢动作怎么调速度快慢(iphone慢动作怎么调速)

  • 网速慢是怎么回事(网速慢是怎么回事?)

    网速慢是怎么回事(网速慢是怎么回事?)

  • 1寸证件照尺寸像素(1寸证件照尺寸标准像素)

    1寸证件照尺寸像素(1寸证件照尺寸标准像素)

  • 高频率和低频率的区别(高频率和低频率和波长的关系)

    高频率和低频率的区别(高频率和低频率和波长的关系)

  • 荣耀x10发布时间(荣耀magic4发布时间)

    荣耀x10发布时间(荣耀magic4发布时间)

  • 组成cpu的两大部件是什么和什么(组成cpu的两大组件)

    组成cpu的两大部件是什么和什么(组成cpu的两大组件)

  • 4g手机可以用5g路由器吗(4g手机可以用5g卡么)

    4g手机可以用5g路由器吗(4g手机可以用5g卡么)

  • r15什么时候上市的(vivos1什么时候上市的)

    r15什么时候上市的(vivos1什么时候上市的)

  • 荣耀20和荣耀v20拍照对比(荣耀20和荣耀v20一样吗)

    荣耀20和荣耀v20拍照对比(荣耀20和荣耀v20一样吗)

  • 华为悬浮球有什么作用(华为悬浮球的功能)

    华为悬浮球有什么作用(华为悬浮球的功能)

  • 信号上面显示x怎么解决(信号上面显示HD怎么关闭)

    信号上面显示x怎么解决(信号上面显示HD怎么关闭)

  • 什么是计算机多媒体技术(多计算机系统属于什么体系结构)

    什么是计算机多媒体技术(多计算机系统属于什么体系结构)

  • 微信怎么扫一扫付钱(微信怎么扫一扫提取文字)

    微信怎么扫一扫付钱(微信怎么扫一扫提取文字)

  • 剪映怎么用本地音乐(剪映怎么用本地音乐导出)

    剪映怎么用本地音乐(剪映怎么用本地音乐导出)

  • 音频运放的作用是什么(由运放器构成的音频放大电路设计、仿真、测试报告)

    音频运放的作用是什么(由运放器构成的音频放大电路设计、仿真、测试报告)

  • 探探查看谁喜欢我(探探 看谁喜欢我)

    探探查看谁喜欢我(探探 看谁喜欢我)

  • 网易云手机号换了怎么解绑(网易云手机号换了怎么登录)

    网易云手机号换了怎么解绑(网易云手机号换了怎么登录)

  • 抖音视频发不出去怎么回事(抖音视频发不出去存草稿箱怎么解决)

    抖音视频发不出去怎么回事(抖音视频发不出去存草稿箱怎么解决)

  • 每张a3纸上从左到右按顺序打印两页内容(每张a3纸上从左到右按顺序)

    每张a3纸上从左到右按顺序打印两页内容(每张a3纸上从左到右按顺序)

  • uniapp、uview——图片上传(单图上传、多图上传、多组照片上传、图片回显)(uniapp+uview)

    uniapp、uview——图片上传(单图上传、多图上传、多组照片上传、图片回显)(uniapp+uview)

  • 法律会计审计咨询合同需要缴纳印花税吗
  • 土地增值税与增值税
  • 上个月的普票开错了怎么办
  • 三方协议缴款账户状态错
  • 固定资产折旧费是产品成本的组成
  • 建筑企业预缴增值税计算
  • 工程交税必须在工程地点交吗
  • 上海2018房产税实施细则
  • 餐饮业是否可以开专用发票
  • 关于两套账老板和会计须知的4个点
  • 长期投资项目包括哪些
  • 母公司捐赠给子公司原材料怎么处理
  • 农业机耕服务是什么税收分类编码
  • 汇算清缴发票可以做费用票吗
  • win11 zen2
  • 鸿蒙系统怎么同步数据
  • 周围的材料分为哪几类
  • 单位出纳的业务有哪些
  • 出差的住宿费较高的原因
  • 关闭自动重新启动会怎样
  • 社保缴纳基数相差多少
  • mac如何打开蓝牙
  • 利息收入增值税确认时点
  • cpu版本的pytorch可以运行LSgan嘛
  • 购货方退货并已签收
  • 布鲁克斯岭
  • 在沙滩上的语句
  • 已抵扣增值税进什么科目
  • PHP new static 和 new self详解
  • 现金流量表补充资料怎么理解
  • h5的开发
  • open是什么含义
  • 深入理解计算机系统
  • mongodb视频教程
  • 将表里的数据批量删除
  • 一次性取得租赁合同
  • 小规模纳税人减半征收的六税两费
  • 个人所得税年度累计扣税规则
  • 企业增值税的计算
  • 应交税费余额是什么意思
  • 公司送礼计入什么会计科目
  • 税控系统技术维护费税率
  • 土地出让金抵减增值税
  • 按工人工资比例结转制造费用会计科目
  • 现金存入银行凭证怎么写
  • 支付的劳务派遣服务费计入什么科目
  • 预付物业费会计分录
  • 自产委托加工的货物用于非增值税应税项目
  • 资产减值损失审计程序是什么
  • 现金流水账怎么做表格
  • 管理会计运用什么软件
  • 物流公司会计工作内容
  • 浅谈基于comsol的锂离子电池仿真
  • sql server如何重启
  • MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别整理
  • win8怎么一开机就进入桌面
  • 英特尔双核cpu
  • mac 邮箱
  • 如何关闭windows更新
  • windows提示音神曲
  • arm和x86性能差多少
  • win7系统怎样
  • winxp如何增加c盘空间
  • 联想安装xp系统
  • win8资源管理器未响应
  • win10无internet怎么办
  • linux 常见
  • unity alembic
  • jQuery Mobile 和 Kendo UI 的比较
  • excel文档权限设置
  • ExtJS4中的requires使用方法示例介绍
  • node.js deno
  • bootstrap3中container与container_fluid外层容器的区别讲解
  • 使用jquery实现的项目
  • 怎么看物理内存
  • jquery使用教程
  • python import ssl
  • 百望税控盘电子发票发送邮箱
  • 武汉洪山实验中学是初中还是高中
  • 地税局公务员工作内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设