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

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

<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 页面传参数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uni app仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • uni-app 支持多端第三方地图定位的方法

    简介 该方法支持跳转第三方地图并定位指定坐标. APP端跳转至百度地图(第三方软件):若无,则跳转至高德地图(第三方软件):若均无,则打开腾讯地图(uni自带方法:uni.openLocation) 其它端打开腾讯地图(uni自带方法:uni.openLocation) demo 源码:https://github.com/yapeee/uni-components 测试数据: wgs84: 39.9078008469, 116.391290596 bd09: 39.915547, 116.40

  • uni-app 组件里面获取元素宽高的实现

    遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox();

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • vue中uni-app 实现小程序登录注册功能

    思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

  • 使用uni-app开发微信小程序的实现

    前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

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

    uni.$emit(eventName,OBJECT) 触发全局的自定事件.附加参数都会传给监听器回调. 其中eventName为事件名,OBJECT为触发事件附加参数 示例代码如下: uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数. eventName为事件名,callback为事件的回调函数. 示例代码如下: uni.$on('updat

  • 微信小程序实现传参数的几种方法示例

    前言 首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧. 一.navigator 跳转时 wxml页面(参数多时可用"&") <navigator url='../index/index?id=1&name=aaa'></navigator> 或者添加点击事件,js用navig

  • js给onclick赋值传参数的两种方法

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 复制代码 代码如下: window.onload = function() {        $('btnTest').onclick = test;     }  function test() {        alert(val);  } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() 复制代码 代码如下: window.onload = function() {  

  • JSP父页面传参数到子页面及接收示例

    1.父页面传参数到子页面 复制代码 代码如下: //JavaScript代码 $.ajax({ type:"POST", uri:"../student/studentInfo.action", data:{ "date":date, "stuNo":stuNo }, success:function(data){ var params = "?date="+date+"&stuNo=&q

  • jsp页面传参乱码的解决方法

    jsp页面传参乱码的解决方法 jsp页面js: encodeURIComponent要使用两次encodeURIComponent(encodeURIComponent(userAccount)); java:String  userAccount = java.net.URLDecoder.decode(userAccount,"UTF-8");/*需要处理异常*/ 纯属个人备注,以便后期使用

  • JS函数arguments数组获得实际传参数个数的实现方法

    JS函数arguments数组获得实际传参数个数的实现方法

    JS与PHP在函数传参方面有点不同,PHP形参与实参个数要匹配,而JS就灵活多了,可以随意传参,实参比形参少或多都不会报错. 实参比形参多不会报错 function say(a){ alert(a); } say('琼台博客','WEB技术博客'); 执行结果 我们再来看看形参比实参多的结果 function say(a,b){ alert('a 的值是 '+a+'\nb 的值是 '+b); } say('琼台博客'); 执行结果 a 对应第一个实参"琼台博客",b 没有对应的实参所以

  • PowerShell定义函数参数的2种方法和传参方法实例

    本文介绍PowerShell自定义函数定义参数的两种方法,一种是将参数列表放到函数名之后,就跟其它语言定义函数参数一样:另一种则是PowerShell独有的方式,那就是使用param关键词. 先来看看第一种定义参数的方式--将参数列表放到函数名之后 举个例子先看看: 复制代码 代码如下: function Test-Function($参数名1='默认参数值1', $参数名2='默认参数值2') {     Write-Host "参数1=$参数名1,参数2=$参数名2"; } 这种方

  • JS获取地址栏参数的两种方法(简单实用)

    js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window

  • SpringMVC上传文件的两种方法

    SpringMVC上传文件的两种方法

    在该示例中,阐述了SpringMVC如何上传文件. 1.上传页面upload.jsp <body> <form action="/TestSpringMVC3/data/uploadfile" enctype="multipart/form-data" method="post"> file:<input type="file" name="file"><br>

  • 详解向scrapy中的spider传递参数的几种方法(2种)

    有时需要根据项目的实际需求向spider传递参数以控制spider的行为,比如说,根据用户提交的url来控制spider爬取的网站.在这种情况下,可以使用两种方法向spider传递参数. 第一种方法,在命令行用crawl控制spider爬取的时候,加上-a选项,例如: scrapy crawl myspider -a category=electronics 然后在spider里这样写: import scrapy class MySpider(scrapy.Spider): name = 'm

随机推荐