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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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检测移动设备类mobile detection使用实例
2014/04/14 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
javascript Keycode对照表
2009/10/24 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
中学生校园广播稿
2014/01/16 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
单位租房协议范本
2014/12/03 职场文书