uniapp onLoad生命周期 uni.$on接受参数无法改变data数据解决办法

这篇具有很好参考价值的文章主要介绍了uniapp onLoad生命周期 uni.$on接受参数无法改变data数据解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题阐述:

a: uni.$emit('name',data)
 uni.navigateTo({url:b})


b:onload(){
uni.$on('name',(res)=>{
this.name=res
console.log(this.name)
})

}

用以上写法来跨页面传参会发现在b页面,虽然能够接受到参数但是赋值到data时候没生效,虽然控制台能够打印出数据,但是页面上面并不会动态改变。用setTimeout包裹也没有用
如果想要用$emit和 $on来跨页面传参,只适合以下情况

a页面->b页面 
a页面$on('name',()=>{
setTimeout(()=>{})
})  b页面$emit
也就是说$on监视器声明一定要在触发前才能用

解决方法

如果想要实现a->b传值可以这样文章来源地址https://www.toymoban.com/news/detail-683832.html

a: uni.navigateTo({
        url: url,
        success: (res) => {
          res.eventChannel.emit("data", data);
        },
      });
b:  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("data", (res) => {
    
    });

  },

到了这里,关于uniapp onLoad生命周期 uni.$on接受参数无法改变data数据解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app--》uni-app的生命周期讲解

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月18日
    浏览(51)
  • vue,小程序,uni-app的生命周期?

    Vue、小程序和Uni-App都有各自的生命周期,下面是它们的生命周期介绍: Vue 的生命周期 Vue 的生命周期分为创建、挂载、更新和销毁四个阶段,具体的生命周期函数如下: beforeCreate:实例刚在内存中被创建出来,此时还没有初始化好 data 和 methods 属性。 created:实例已经在内

    2024年01月25日
    浏览(51)
  • 如何在uniapp的onshow 接受参数?

    在日常使用uniapp开发,我们正常接受参数的方式如下: 正常页面 onLoad 可以接收上个页面的参数 但是 onLoad() 页面只会加载一次。 现在有这么一个应用场景: A 页面跳转到 B 页面,B页面处理完再回到 A页面时,A页面不会再次触发 onLoad(). 当前页面如果是其他页面的回调(ret

    2024年02月11日
    浏览(34)
  • 【uniapp】学习之【生命周期】

    uniapp生命周期 uni-app框架的生命周期分为两种 : 应用中的生命周期 和 页面内的生命周期 uni-app 应用生命周期 uni-app 页面生命周期

    2024年02月12日
    浏览(37)
  • uniapp生命周期

    Uniapp作为一款跨平台应用开发框架,具有丰富的生命周期,以下是Uniapp的生命周期: 1.应用生命周期 应用生命周期是指应用程序从启动到关闭的整个过程,包括应用程序的启动、前后台切换、退出等。Uniapp提供了以下生命周期钩子函数: onLaunch:应用程序启动时触发,仅在应

    2023年04月23日
    浏览(32)
  • #Uniapp:页面的生命周期

    uni-app 页面的生命周期 函数名 说明 平台差异说明 最低版本 onInit 监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad 百度小程序 3.1.0+ onLoad 监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、

    2024年01月24日
    浏览(34)
  • uniapp -- 页面生命周期

    除了 Vue 的生命周期之外,uniapp 也有一套自己的页面生命周期 😁,它们依然和 data 等方法同级 它的参数是上个页面所传递的数据,参数类型是对象类型(用于页面之间的传参) 页面每次出现在屏幕上都会触发,包括从下级页面点返回露出当前页面 仅支持:App、微信小程序

    2024年02月13日
    浏览(33)
  • 【Uniapp】三、生命周期及路由

    学习一个工具的目的核心是什么?是为了解决核心业务逻辑问题,业务逻辑很多时候简单的解释一句话:“在合适的时机干合适的事情”,OK!什么是合适的时机呢?简单的说,页面运行过程中,各个阶段的回调函数就是页面中的时机,我们也叫这个为“生命周期钩子函数”

    2024年02月09日
    浏览(36)
  • uniapp中小程序的生命周期

    一、uni-app应用生命周期 函数名 说明 onLuaunch 当uni-app 初始化完成时触发(全局只触发一次) onShow 当 uni-app 启动,或从后台进入前台显示 onHide 当 uni-app 从前台进入后台 onError 当 uni-app 报错时触发 onUniNViewMessage 对 nvue 页面发送的数据进行监听 onUnhandledRejection 对未处理的 Prom

    2024年02月11日
    浏览(47)
  • 小程序开发.uniapp.生命周期

    小程序开发.uniapp.生命周期 【内容介绍】: uniapp中生命周期相关内容 相关文章推荐: 标题 链接 《小程序开发.概述与环境搭建》 https://blog.csdn.net/qq_28550263/article/details/125860530 《小程序开发.mpvue.架构简介》 https://blog.csdn.net/qq_28550263/article/details/125881363 《VUE实例及其生命周期

    2024年02月11日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包