uni-app如何页面传参数的几种方法总结


Posted in Javascript onApril 28, 2020

uni.$emit(eventName,OBJECT)

  • 触发全局的自定事件。附加参数都会传给监听器回调。
  • 其中eventName为事件名,OBJECT为触发事件附加参数

示例代码如下:

uni.$emit('update',{msg:'页面更新'})

uni.$on(eventName,callback)

  • 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数。
  • eventName为事件名,callback为事件的回调函数。

示例代码如下:

uni.$on('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); })

作用
实际开发中对于触发页面的动态更新将非常有效。
例如移动端项目通过自己编写的组件替代tabbar进行tabar跳转,恰逢这时某个页面如微信支付成功,需要返回这个tabbar页面,你会发现他不会像普通uni页面(onshow生命周期)一样会动态刷新,这就很影响用户实际体验。因此这个方法就很有效,只需要在组件中写入uni.emit(update.masq:'页面刷新')然后在页面使用uni.on('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); })接收,将函数写入即可。实际应用例子如下:

组件中:

onShow() {
switch (this.Tab){
case 'demo':
uni.$emit('update',{msg:'页面更新'});
break;
}

},

demo页面中:

created() {
uni.$on('update', (res) => {
this.list()
console.log(res, '更新');
})
},

测试最终结果:

针对于页面传参请直接使用Vue的全局变量更方便 ,因为uni-app框架的uni.$emit()和$on() 虽然使用了定时器能接收到参数,但是不知道为什么第一次总是接收不到导致很多为!后续有时间在慢慢研究为什么?但是使用Vue的全局变量能搞定一切!

如何使用uni.$emit()和uni.$on() 进行页面间通讯【有一个坑务必注意】

参考官方文档,然后记住一句话:

必须先跳转打开页面,才能发射参数,否则发射无效,接收页面无法接收

其次,如果遇到一次接收无效可能需要发送的时候增加一个定时器,不然接收$on的回调函数可能不执行

参考官方文档:https://ask.dcloud.net.cn/article/36010

uni-app如何页面传参数的几种方法总结

uni-app如何页面传参数的几种方法总结

<template>
  <view>
    <button @tap="click">
      点击发射
    </button>
 
  </view>
</template>
<script>
  import Vue from "vue";
  export default {
    methods: {
      click() {
        // 【非常重要】必须先跳转打开页面,才能发射参数,否则发射无效,接收页面无法接收
        Vue.prototype.$uniReLaunch("/pages/test/test001");
        uni.$emit("test", {
          test: "成功",
        });
        console.log("发射事件test成功");
      },
    },
  };
</script>
<template>
  <view></view>
</template>
<script>
  export default {
    onLoad() {
      uni.$on("test", (data) => {
        console.log("接收事件test成功,data=", data);
      });
    },
  };
</script>

到此这篇关于uni-app如何页面传参数的几种方法总结的文章就介绍到这了,更多相关uni-app 页面传参数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
详解javascript函数的参数
Nov 10 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 #Javascript
JS 创建对象的模式实例小结
Apr 28 #Javascript
JavaScript console的使用方法实例分析
Apr 28 #Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 #Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 #Javascript
JavaScript 链表定义与使用方法示例
Apr 28 #Javascript
Vue 3.0 全家桶抢先体验
Apr 28 #Javascript
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Javascript获取某个月的天数
2018/05/30 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Python实现12306火车票抢票系统
2019/07/04 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python如何根据时间序列数据作图
2020/05/12 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
优秀员工自荐信范文
2013/10/05 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
法人代表授权委托书
2014/04/08 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
党员年度个人总结
2015/02/14 职场文书
职位证明模板
2015/06/23 职场文书
国庆节主题班会
2015/08/15 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python