位置: 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锁定改不了)

  • 抖音怎么送别人人气票(抖音怎么送别人礼物)

    抖音怎么送别人人气票(抖音怎么送别人礼物)

  • 华为荣耀8是双4g手机吗(华为荣耀8是双卡双待手机吗)

    华为荣耀8是双4g手机吗(华为荣耀8是双卡双待手机吗)

  • 苹果哪个手机性价比高(苹果哪个手机性能最好)

    苹果哪个手机性价比高(苹果哪个手机性能最好)

  • 苹果光圈怎么开(苹果光圈怎么调出来)

    苹果光圈怎么开(苹果光圈怎么调出来)

  • 微信系统处于通话状态怎么关闭(微信系统处于通话)

    微信系统处于通话状态怎么关闭(微信系统处于通话)

  • 显卡种类(显卡种类及性能大全)

    显卡种类(显卡种类及性能大全)

  • 苹果手机一些软件安装不了怎么办(苹果手机一些软件打开界面是灰色的)

    苹果手机一些软件安装不了怎么办(苹果手机一些软件打开界面是灰色的)

  • 快手推广别人会显示推广吗(快手推广别人能看到被推广吗)

    快手推广别人会显示推广吗(快手推广别人能看到被推广吗)

  • 手机人脸识别原理(手机人脸识别鸡肋)

    手机人脸识别原理(手机人脸识别鸡肋)

  • 小米耳机2和2s区别(小米蓝牙耳机2和小米蓝牙耳机2s 的区别)

    小米耳机2和2s区别(小米蓝牙耳机2和小米蓝牙耳机2s 的区别)

  • ipada1538是什么版本(ipada1538多少钱)

    ipada1538是什么版本(ipada1538多少钱)

  • 快手id能做账号登录吗(快手用户id号可以随便改吗)

    快手id能做账号登录吗(快手用户id号可以随便改吗)

  • 手机有回音是怎么回事(手机有回音是怎么回事华为)

    手机有回音是怎么回事(手机有回音是怎么回事华为)

  • 手机qq音乐怎么导入电脑(手机qq音乐怎么投屏到电视上)

    手机qq音乐怎么导入电脑(手机qq音乐怎么投屏到电视上)

  • 苹果lla是什么版本有锁吗(lla是什么版本的苹果手机)

    苹果lla是什么版本有锁吗(lla是什么版本的苹果手机)

  • pr添加字幕如何移动(pr添加字幕如何保持一个大小)

    pr添加字幕如何移动(pr添加字幕如何保持一个大小)

  • 红米note7pro无故黑屏的原因(红米note7pro无限重启不开机)

    红米note7pro无故黑屏的原因(红米note7pro无限重启不开机)

  • 迅雷下载链接是什么格式(迅雷下载链接是什么格式 ma)

    迅雷下载链接是什么格式(迅雷下载链接是什么格式 ma)

  • 如何让b站锁屏也能播放(如何让b站锁屏也能播放视频)

    如何让b站锁屏也能播放(如何让b站锁屏也能播放视频)

  • 红米note7用贴膜吗(红米note七钢化膜)

    红米note7用贴膜吗(红米note七钢化膜)

  • 抖音上怎么卖自己的商品(抖音上怎么卖自己家的脐橙)

    抖音上怎么卖自己的商品(抖音上怎么卖自己家的脐橙)

  • 蚂蚁森林时光加速器如何使用(蚂蚁森林时光加速器怎么没有了)

    蚂蚁森林时光加速器如何使用(蚂蚁森林时光加速器怎么没有了)

  • picsvr.exe是什么进程 picsvr进程查询(picfile什么意思)

    picsvr.exe是什么进程 picsvr进程查询(picfile什么意思)

  • 一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作(一个简单的html文档一般且必须包含哪些标签)

    一个简单的HTML网页(千与千寻电影) 大二学生网页设计与制作 电影主题网页制作(一个简单的html文档一般且必须包含哪些标签)

  • 三公经费指的是什么
  • 会计账簿错弊有哪些
  • 个体户定额征收标准
  • 保税仓发货的商品,每个人的年度消费限额是
  • 滴滴的发票能不能作废
  • 公司买大米怎么做账
  • 银行网银服务费做什么科目
  • 小规模企业所得税多少
  • 增值税可以做平吗
  • 收到的增值税
  • 职工福利费劳保用品
  • 收到固定资产抵账增值税计税基础
  • 赊销固定资产会计科目
  • 销售折扣怎么开
  • 外单位的人能否作为本单位的费用报销人?
  • 社会保险与个人养老金的区别
  • 工资预支怎么做账,影响个税吗?
  • 公司购买商品房可以抵扣增值税吗
  • 当期销项税额等于什么乘以什么
  • 金税盘和报税盘图片
  • 劳务派遣工资需要发票吗
  • 环保设备的折旧计入
  • 房地产行业规定
  • 小规模税收减免
  • 车辆保险车船税怎么计算
  • 差额增值税计算公式
  • 无法加载响应数据 对于预检请求没有可显示的内容
  • 怎么用苹果6splus
  • 单位价值5000元二手设备怎么算
  • 如何设置win10电脑开机不黑屏
  • 福利费发票已认证怎么查
  • 电脑任务栏图标怎么全部显示出来
  • wordpress注册界面
  • PHP:is_writeable()的用法_Filesystem函数
  • 结转商品的成本的会计分录
  • php的implode函数
  • token的用处
  • 最新前端技术
  • 科大讯飞语音识别主要产品
  • 帝国cms使用手册
  • 融资租赁租车
  • 用友t3财务软件价格表
  • 不动产作价出资入股登记收件
  • 个体工商户可以抵扣进项吗
  • 财务费用应付利息
  • 不确认销售收入的原因
  • 归纳投入外币资产怎么写
  • 购进固定资产没有发票怎么入账
  • 营改增后服务业账务处理
  • 应付帐款不用付了的分录怎么处理
  • 固定资产改造更新后年限怎么算
  • 工程类的增值税
  • 员工奖励的现金有哪些
  • 从公司账户转给出纳备注
  • 绿化植物税率
  • 其他应收款待抵扣借方是什么意思啊
  • 暂估入库后发票来不了会计分录
  • 会计凭证的审核的注意事项有哪些
  • mysqlyog安装教程
  • mysql查询id最大的记录
  • mac安装mysql的两种方法(含配置)
  • 电脑如何将耳机模式换扬声器
  • windows2008r2修改密码
  • xp系统连接共享文件夹
  • linux 删除重复文件
  • 包含正在使用的windows版本 无法格式化
  • windows10x预览版
  • win7笔记本设置合上盖子不休眠
  • 电脑审核策略更改是什么意思
  • 电脑为什么会黑屏
  • win10 提示你的设备遇到问题 需要重新启动
  • 如何配置sendmail
  • WIN10更新失败
  • c++lambda函数
  • LinearLayout layout_weight解析
  • 认识iu
  • jquerycuishifeng
  • 甘肃税务局电子税务局app
  • popl期刊
  • 大专学费减免多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设