Uniapp中父子页面传值

news2024/9/27 15:21:40

效果

在这里插入图片描述
在这里插入图片描述

实现

A页面

点击图一按钮进入图二页面

<view class="cu-form-group margin-top">
			<button class="cu-btn sm bg-gradual-green" style="margin-left: 70%; " @click="selectMaterial">
				选择物料
			</button>
		</view>
selectMaterial() {
				let _this = this
				uni.navigateTo({
					url: '/pages/product/PartsMaterialSelect',
					events: {
						materialData: function(data) {
							console.log('返回值', data)
						}
					}
				})
			},

B页面

B页面绑定了C页面,主要用来传值
同时加载B页面时调用后端接口,返回查找值

view class="scrollbox">
			<scroll-view scroll-y="true">
				<MaterialCardParts :materials="materials"></MaterialCardParts>
			</scroll-view>
		</view>
		<view class="padding-xs">
			<uni-pagination :current="currentPage" :total="totals" :pageSize="total" @change="handlePage">
			</uni-pagination>
			<text style="margin-left: 28%;">总数:{{totals}}条,每页最多:{{total}}</text>
		</view>

//获取所有的MaterialCode
			getAllMaterialCode() {
				let _this = this;
				let params = {
					pageIndex: _this.currentPage,
					pageSize: _this.total
				};
				uni.request({

					url: apiUrl + '/GetAllMaterialCode',
					method: "POST",
					data: params,
					success: (res) => {
						console.log('返回值2', res.data.data)
						_this.materials = res.data.data.ret;
						_this.totals = res.data.data.pageTotal
					},
					fail: (res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					},
				})
			}

C页面(B的子页面)

<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th width="80" align="center">物料编码</uni-th>
					<uni-th width="80" align="center">物料名称</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in materials" :key="index">
					<uni-td>{{ item.materialCode }}</uni-td>
					<uni-td>
						<view class="name">{{ item.materialName }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>

props: {
			materials:{
				 type: Array,
				 default: () => []				
			},
			func: {
				type: Object,
				value: null
			}
		}

思路

父页面可以将获取到的数据作为props属性传递给子页面。在父页面中,将数据作为props属性的值传递给子页面组件。在子页面组件中通过props接收数据并在页面中使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1078658.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

联邦学习中的攻击手段和防御机制

联邦学习产生的背景&#xff1a; 海量数据的生成和这些数据的后续处理往往需要一个数据仓库并在仓库内汇总数据。然而&#xff0c;随着数据泄漏事件层出不穷&#xff0c;数据安全性得不到保障&#xff0c;人们开始怀疑集中收集数据是否可靠&#xff0c;数据的隐私性的也得到了更…

Web应用防火墙的重要性及基本原理

企业网络安全是保障业务稳定运行的基础&#xff0c;而Web应用防火墙&#xff08;WAF&#xff09;是这个基础上的重要一环。本文将为你详细介绍WAF的基本原理&#xff0c;并探讨其在维护网络安全中的重要作用。 一、Web应用防火墙是什么&#xff1f; Web应用防火墙&#xff08;…

VSCode插件开发概述

目录 VSCode插件开发概述vscode插件vscode插件的用途脚手架安装重要文件package.jsonactivationEvents extension.js一个简单的例子本地打包 VSCode插件开发概述 vscode插件 vscode 是微软推出的一款轻量级代码编辑器&#xff0c;在使用的时候总会需要安装一些插件去协助我们…

[代码学习]einsum详解

einsum详解 该函数用于对一组输入 Tensor 进行 Einstein 求和&#xff0c;该函数目前仅适用于paddle的动态图。 Einstein 求和是一种采用 Einstein 标记法描述的 Tensor 求和&#xff0c;输入单个或多个 Tensor&#xff0c;输出单个 Tensor。 paddle.einsum(equation, *opera…

Win11自定义目录安装Linux子系统wsl

1. 启用适用于 Linux 的 Windows 子系统和虚拟机功能 以管理员身份打开 PowerShell&#xff08;“开始”菜单 >“PowerShell” >单击右键 >“以管理员身份运行”&#xff09;&#xff0c;然后依次输入执行以下命令&#xff1a; dism.exe /online /enable-feature /f…

3ds Max渲染太慢?创意云“一键云渲染”提升3ds Max渲染体验

&#xfeff;在数字艺术设计领域&#xff0c;3ds Max是广泛使用的三维建模和渲染软件之一。然而&#xff0c;许多用户都面临着一个共同的问题&#xff1a;渲染速度太慢。渲染一帧画面需要耗费数小时&#xff0c;让人无法忍受。除了之前给大家介绍的几种解决方法外&#xff1a; …

【斗破年番】导演紧急删减第66集预告,陨落心炎事件要重演?

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析斗破苍穹年番最新资讯。 斗破苍穹年番第65集已经出来了&#xff0c;在这一集出来后按例官方放出来第66集和第67集的预告。只是让小郑没有想到的是&#xff0c;刚开始看第66集预告还好好的&#xff0c;但是等到再看的时候就…

代理SSL证书的优势——JoySSL

随着互联网的发展&#xff0c;越来越多的企业和个人开始使用网站来提供服务和信息。而SSL证书作为保障网站安全的重要工具&#xff0c;也逐渐被广泛应用。然而&#xff0c;对于许多企业和个人来说&#xff0c;购买和安装SSL证书是一项昂贵的任务。这就需要代理SSL证书的出现&am…

SLAM从入门到精通(camera数据读取)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 实际ros开发的时候&#xff0c;现场有很多特征都可以用来进行采集和标定。比如说地面&#xff0c;对于外资企业或者管理比较规范的企业来说&#x…

UNet及其变体在医学图像分割中的性能分析

论文链接&#xff1a;https://arxiv.org/abs/2309.13013 机构&#xff1a;英国伦敦布鲁内尔大学 日期&#xff1a;20230922 因为太长了长达37页所以我也就记点重点内容了hhh,我重点关注的还是在Unet以及其变体上&#xff0c;不过感觉严格意义上来说里面提到的方法不算很新&a…

嵌入式C语言中整形溢出问题分析

整型溢出有点老生常谈了&#xff0c;bla, bla, bla… 但似乎没有引起多少人的重视。整型溢出会有可能导致缓冲区溢出&#xff0c;缓冲区溢出会导致各种黑客攻击。 今天分享一篇文章&#xff0c;希望大家都了解一下整型溢出&#xff0c;编译器的行为&#xff0c;以及如何防范&a…

【安全】 Java 过滤器 解决存储型xss攻击问题

文章目录 XSS简介什么是XSS?分类反射型存储型 XSS(cross site script)跨站脚本攻击攻击场景解决方案 XSS简介 跨站脚本( cross site script )为了避免与样式css(Cascading Style Sheets层叠样式表)混淆&#xff0c;所以简称为XSS。 XSS是一种经常出现在web应用中的计算机安全…

mistyR官网教程 空转spatial

Modeling spatially resolved omics with mistyR • mistyR (saezlab.github.io) mistyR and data formats • mistyR (saezlab.github.io) Heidelberg University and Heidelberg University Hospital, Heidelberg, Germany Jožef Stefan Institute, Ljubljana, Sloveniajov…

阿里5年经验之谈 —— 浅谈自动化测试方法!

导读 在当今快节奏的软件开发环境中&#xff0c;高质量的代码交付至关重要。而针对经过多次迭代&#xff0c;主要功能趋向稳定的产品&#xff0c;大量传统的重复性手动测试方法已经无法满足高效、快速的需求。为了提高测试效率保证产品质量&#xff0c;本文通过产品实践应用&a…

Python接口自动化测试之token参数关联

前言 在做自动化接口测试时&#xff0c;有时候会遇到token的动态关联&#xff0c;例如查询余额接口&#xff0c;需要关联登录接口的token动态值&#xff0c;如何利用python脚本进行接口token关联呢?今天我们爱学习一下吧&#xff01; 一&#xff1a;获取登录接口返回的token…

研发项目管理系统对比:找到最适合的高效工具

研发部门是企业非常重要的部门&#xff0c;代表着企业未来能否在市场上拥有优秀的技术&#xff0c;站稳市场份额。很多企业的研发方式往往是瀑布式的&#xff0c;所以项目的阶段规划&#xff0c;然后每个阶段的需求分配给开发人员&#xff0c;可以随时查看每个需求的开发进度和…

Redis学习5——有序集合Zset数据类型的操作

有序集合Zset 常用命令 数据结构 跳跃表 跳跃表

移远通信EM060K系列LTE-A Cat 6模组完成全球认证覆盖

近日&#xff0c;移远通信LTE-A Cat 6模组EM060K系列顺利完成全球认证覆盖&#xff0c;将以卓越的性能和品质助力海内外客户终端大规模部署&#xff0c;为其提供畅快的高速网络连接。同时&#xff0c;凭借着有竞争力的性能和成本优势&#xff0c;EM060K系列将加速释放海外固定无…

[架构之路-235]:目标系统 - 纵向分层 - 数据库 - 数据库系统基础与概述:数据库定义、核心概念、系统组成

目录 一、核心概念 1.1 什么是数据与信息 1.2 数据与数据库的关系 1.3 什么是数据库 1.4 数据库中的数据的特点 1.5 数据库与数据结构的关系 二、数据库系统 2.1 什么是数据库管理系统 2.2 什么是数据库系统 2.3 数据库相关的人员 2.4 数据库的主要功能 2.5 Excel表…

Vuex的基础使用存值及异步

目录 一、概述 ( 1 ) 讲述 ( 2 ) 概念 ( 3 ) 作用 二、取值 1. 安装 2. 菜单栏 3. 模块 4. 引用 三、改值 四、异步&后台请求 带来的获取 一、概述 ( 1 ) 讲述 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的…