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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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面向对象编程快速入门
2006/12/14 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python设置环境变量的作用和实例
2019/07/09 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
个人求职信范文
2014/05/24 职场文书
物流管理专业推荐信
2014/09/06 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
推销搭讪开场白
2015/05/28 职场文书
横空出世观后感
2015/06/09 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js