uniapp页面间传参的几种方法实例总结

目录
  • 前言
  • 一、上级页面 → 下级页面(单向)
    • uni.navigateTo:URL编程式传参
    • <navigator>标签传参
  • 二、上级页面 ← 下级页面(单向)
    • uni.$on(eventName,callback):监听事件
    • 触发事件
  • 三、上级页面 ↔ 下级页面(双向)
    • 上级页面内代码
  • 总结

前言

在Uniapp中的传参主要分为以下三种类型:

上级页面 → 下级页面(单向)上级页面 ← 下级页面(单向)上级页面 ↔ 下级页面(双向)

本文将围绕这三种传参展开,分享其使用方法以及我使用中所遇到的问题与解决方法。

一、上级页面 → 下级页面(单向)

uni.navigateTo:URL编程式传参

作为最常用也是最简单的跳转携带参数的API,这里不多赘述,想详细了解的朋友可以前往官方文档学习,这里只做传参分享。

官方文档:uni.navigateTo(OBJECT)

携带静态参数

//在起始页面跳转到test.vue页面并传递参数
//作用场景,需要提供固定传参状态的页面,一般和动态参数一起使用
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

携带动态参数

//在起始页面跳转到test.vue页面并传递参数
let uniapp = {
    uniappItem: 0,
};
//当传递的参数是对象时,必须先转化为JSON格式
uni.navigateTo({
	url: 'test?id=1&name=' + JSON.stringify(uniapp),
});

页面接收

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

<navigator>标签传参

URL有长度限制,太长的字符串会传递失败,可改用窗体通信全局变量,另外参数中出现空格等特殊字符时需要对参数进行编码,如下为使用encodeURIComponent对参数进行编码的示例。

标签传参

//此处的 :URL 是动态载入,参数是变量;
//当使用了 :URl 却使用了静态地址,有可能不生效,同样如果使用了变量却没有用 :URL 也会有问题
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))">
</navigator>

页面接收

// 在test.vue页面接受参数
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

二、上级页面 ← 下级页面(单向)

一般来说 uni.navigateTo 的参数传递可以满足页面的传递,但遇到需要更新上级页面的需求时,就需要使用uni. e m i t ( ) 和 u n i . emit()和uni. emit()和uni.on() 进行页面间通讯。

该方法一般运用在当你从下级页面(或组件)改变数据后,通知上级页面进行刷新或其他操作,实在不清楚也没关系,当你需要时自然明白。

uni.$on(eventName,callback):监听事件

在上级页面设置 uni.$emit() 来监听下级页面的调用,其中的eventName就是事件名称,第二个参数是接受到函数后触发的回调函数。在监听事件结束后一定要移除监听事件,不然会有重复监听的问题。

// 我的页面
onLoad(){
    // 监听事件
    uni.$on('login',(usnerinfo)=>{
        this.usnerinfo = usnerinfo;
    })
},
onUnload() {
    // 移除监听事件
    uni.$off('login');
},

触发事件

传递的参数一定是要在对象中的属性

uni.$emit('login', {
	avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',
	token: 'user123456',
	userName: 'unier',
	login: true
});

三、上级页面 ↔ 下级页面(双向)

在一般情况下,单向传递已经可以满足我们的业务需求,如向下级页面传递需要显示的参数、变动的状态,向上级页面传递的需要更新的数据或是需要再次调用的函数。

但遇到两个联系十分紧密的页面时,单向传递就无法满足我们的业务需求,向下级页面传递参数和监听事件就会显得特别繁琐。在uniapp中,它将上面两种传递方式加以结合,提供了这样一个方法去实现双向传递:uni.navigateTo({ event:{} })

上级页面内代码

// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: 'pages/test?id=1',
  // 调用通信事件对象
  events: {
    // 获取下级页面参数:
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    // 注意看下级页面中所对应的函数名,你可以定义多个方法去管理传递的参数
    acceptDataFromOpenedPage: function(data) {
      // 对数据做处理
      console.log(data)
    },
    someEvent: function(data) {
      // 对数据做处理
      console.log(data)
    }
  },
  // 发送通信方法
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    // 其中含有两个参数,第一个是接收的函数名,第二个则是需要携带的参数
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

下级页面内代码

// 在test.vue页面,向起始页通过事件传递数据
// 此方法不是一定要在 onLoad 内调用,哪里需要哪里调
onLoad: function(option) {
  // 此处声明只是为了显示看起来简洁一点
  const eventChannel = this.getOpenerEventChannel();
  // emit 代表的就是向上一个页面传递需要更新的数据
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 接收上个页面传递的数据
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    // 对数据做处理
    console.log(data)
  })
}

总结

到此这篇关于uniapp页面间传参的几种方法的文章就介绍到这了,更多相关uniapp页面间传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • uniapp中微信小程序与H5相互跳转以及传参详解(webview)

    目录 技术栈: 前言: 一.小程序向H5传递 1.小程序端发送数据 2.pages.json进行设置 3.H5端进行数据接收 4.调试方式以及数据查看 二.H5向小程序传递 1.引入需要的模块 2.更改文件内容 3.H5端发送数据 4.小程序端进行数据接收 5.调试方式以及数据查看 三.参考链接地址 总结 技术栈: uniapp-H5+uniapp-微信小程序(vue3+vite2+ts) 前言: 在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,这两个端都是使用uniapp编写的

  • uniapp中uni.switchTab无法传参的解决办法

    目录 问题描述 原因分析 解决方案 补充:解决uni.switchTab()跳转不刷新 总结 问题描述 在uniapp中使用uni.switchTab无法传参 uni.switchTab({ url:`/pages/report/report?Id=${query}` }) 原因分析 uniapp官方定义uni.switchTab无法传参 参数 类型 必填 说明 url String 是 需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后

  • 详解uniapp页面跳转URL传参大坑

    案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet

  • 小程序页面间传参的五种方式实例详解

    目录 前言 1.使用globalData 2.使用storage 3.使用url 3.1 api跳转 3.2 组件跳转 4.使用通信通道 5.使用页面栈 总结 前言 由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结.共有五种传参方式,各位有什么关于页面间传参的奇思妙想也可在评论区提出,大家共同探讨 概览: 方式 优点 缺点 globalData 双向传参.全应用可用 不及时 storage 双向传参.全应用可用 不及时 路由 简单方便.及时 正向传参 通信

  • 微信小程序页面间值传递的两种方法

    一:url带参数传递 与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml: <!--index.wxml--> <view class="container"> <!-- 使用navigator组件 --> <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>

  • C#实现向多线程传参的三种方式实例分析

    本文实例讲述了C#实现向多线程传参的三种方式.分享给大家供大家参考,具体如下: 从<C#高级编程>了解到给线程传递参数有两种方式,一种方式是使用带ParameterizedThreadStart委托参数的Thread构造函数,另一种方式是创建一个自定义类,把线程的方法定义为实例的方法,这样就可以初始化实例的数据,之后启动线程. 方式一:使用ParameterizedThreadStart委托 如果使用了ParameterizedThreadStart委托,线程的入口必须有一个object类型的

  • django学习之ajax post传参的2种格式实例

    一.ajax介绍 1.ajax的含义 Ajax全称"Async Javascript And XML"即:异步的javascript和XML.它是一种称谓,并不指代某项具体的技术,准确来说是一系列技术的集合.现在,所有的无刷新操作都被称为"Ajax". 2.使用ajax的好处: 使用ajax避免了整页数据的刷新,也减少了请求等待的时间,提高了用户体验. 二.ajax传参的两种格式 假设有如下表单,需要将这些表单用ajax传参的方式传给后台,该怎么做呢- 我们知道aj

  • ASP.NET页面间数据传递的几种方法介绍

    Web页面是无状态的,服务器对每一次请求都认为来自不同用户,因此,变量的状态在连续对同一页面的多次请求之间或在页面跳转时不会被保留.在用ASP.NET 设计开发一个Web系统时, 遇到一个重要的问题是如何保证数据在页面间进行正确.安全和高效地传送,Asp.net 提供了状态管理等多种技术来解决保存和传递数据问题,以下来探讨.NET 下的解决此问题的各种方法和各自的适用场合. 一.ASP.NET页面间数据传递的各种方法和分析 1.使用Querystring 方法 QueryString 也叫查询字

  • 详解Angular5 路由传参的3种方法

    本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product?id=1&name=iphone还可以是: [ routerLink]= "['/books']" [ queryParams]= "{bookname:'<活着>'} 代码:html <h4>Messages</h4> <p&g

  • ASP.NET页面间的传值的几种方法

    ASP.NET WEB FORMS 给开发者提供了极好的事件驱动开发模式.然而这种简单的应用程序开发模式却给我们带来了一些小问题,举个例子,在传统的ASP应用程序中,你能够通过POST方法很容易的把一个值或多个值从一个页面传送到另一个页面,用同样的方法在ASP.NET中实现有点麻烦.在这里,我们可以通过其他方式来解决这种情形.ASP.NET为我们提供了三种方式,一种是可以通过用QueryString来传送相应的值,再一种是通过session变量来传送相应的值,还有就是通过Server.Trans

  • php向js函数传参的几种方法

    <?php echo "<script>test('$_POST[userid]');</script> "; ?> 在上面的$_POST['']也可适用$_SESSION[' ']; <?php $para = "hello boby!"; echo $para; echo "<script> var para=\"$para\"; alert(para);</script&

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

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

  • 浅谈React Native 传参的几种方式(小结)

    在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家 React Navigation 导航传值 推荐指数: ♥ ♥ ♥ ♥ ♥ 适用范围: 相互跳转的页面间传值 兼容性: IOS/Android 原理: React Navigation 为页面的 props 上挂载了 navigation 对象, 可用来做路由跳转,在做页面跳转时可以携带参数/回调方法前往目标页面, 从而达到传参的目的 说明

随机推荐