uniapp在app模式下组件传值

在 UniApp 编译成 App 后,传递参数可以通过多种方式实现,常见的方式有以下几种:

1. 通过 URL 参数传递(适用于 WebView)

  • 如果你的 App 页面通过 WebView 渲染,可以像在 Web 端一样通过 URL 传递参数。例如:
    uni.navigateTo({url: '/pages/targetPage/targetPage?param=value'
    });
    
  • 目标页面可以通过 onLoad 获取参数:
    onLoad(options) {console.log(options.param); // 获取 URL 中的 param 参数
    }
    

2. 通过 Vuex 全局状态管理

  • 在 Vue 3 中,可以利用 Vuex 进行全局状态管理,传递全局参数。例如:
    // 在组件中设置 Vuex 状态
    this.$store.commit('setUser', userInfo);
    
    在 Vuex 中定义 mutation:
    const store = createStore({state: {user: null,},mutations: {setUser(state, userInfo) {state.user = userInfo;},},
    });
    
    其他页面可以通过 this.$store.state.user 获取到全局状态。

3. 通过全局变量(例如 globalData)传递参数

  • UniApp 提供了 getApp() 来访问全局的数据。可以在全局 App 实例中设置数据,然后在页面中获取。
    // 在 App.vue 中设置全局数据
    App({globalData: {userInfo: null}
    });
    
    在页面中获取全局数据:
    const app = getApp();
    console.log(app.globalData.userInfo);
    

4. 通过 Storage 本地存储传递参数

  • 使用 uni.setStorageSyncuni.getStorageSync 存储参数,能够在不同页面间传递数据。
    // 设置存储
    uni.setStorageSync('userInfo', userInfo);
    
    在目标页面获取数据:
    const userInfo = uni.getStorageSync('userInfo');
    console.log(userInfo);
    

5. 通过事件总线传递参数

  • 如果你希望在不同页面或组件之间传递数据,而不依赖于存储或 Vuex,可以使用事件总线进行通信。
  • 创建一个全局的事件总线:
    // eventBus.js
    export const eventBus = new Vue();
    
  • 在一个组件中发出事件:
    eventBus.$emit('userUpdated', userInfo);
    
  • 在目标页面或组件中监听事件:
    eventBus.$on('userUpdated', (data) => {console.log(data); // 获取传递的数据
    });
    

6. 通过参数直接传递(适用于组件)

  • 如果你是在不同的组件之间传递数据,可以直接通过 props 传递参数:
    // 父组件
    <child-component :userInfo="userInfo"></child-component>
    
    // 子组件
    props: {userInfo: Object
    }
    

7. 通过原生 API 传递参数

  • 对于原生功能,可以通过 UniApp 提供的原生 API 进行通信。例如,通过 uni.setNativeStorageuni.getNativeStorage 进行原生数据存储和获取。

总结:在 UniApp 中,传参方式的选择依赖于你使用的场景和需求。如果是简单的页面跳转,可以通过 URL 参数或 Vuex 全局状态管理;如果需要在页面间长期存储数据,推荐使用 uni.setStorageglobalData 进行传递。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git入门环境搭建

git下载 git官网地址&#xff1a;https://git-scm.com/ 如果没有魔法的话&#xff0c;官网这个地址能卡死你 这里给个国内的git镜像链接 git历史版本镜像链接 然后一路next 默认路径 默认勾选就行。 今天就写到这吧&#xff0c;11点多了该睡了&#xff0c;&#xff0c;&#x…

Oracle ADB 导入 BANK_GRAPH 的学习数据

Oracle ADB 导入 BANK_GRAPH 的学习数据 1. 下载数据2. 导入数据运行 setconstraints.sql 1. 下载数据 访问 https://github.com/oracle-quickstart/oci-arch-graph/tree/main/terraform/scripts&#xff0c;下载&#xff0c; bank_accounts.csvbank_txns.csvsetconstraints.…

985研一学习日记 - 2024.11.14

一个人内耗&#xff0c;说明他活在过去&#xff1b;一个人焦虑&#xff0c;说明他活在未来。只有当一个人平静时&#xff0c;他才活在现在。 日常 1、起床6:00 2、健身2h 3、LeetCode刷了题 动态规划概念 如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的…

1.两数之和-力扣(LeetCode)

题目&#xff1a; 解题思路&#xff1a; 在解决这个问题之前&#xff0c;首先要明确两个点&#xff1a; 1、参数returnSize的含义是返回答案的大小&#xff08;数目&#xff09;&#xff0c;由于这里的需求是寻找数组中符合条件的两个数&#xff0c;那么当找到这两个数时&#…

【excel】easy excel如何导出动态列

动态也有多重含义&#xff1a;本文将描述两种动态场景下的解决方案 场景一&#xff1a;例如表头第一列固定为动物&#xff0c;且必定有第二列&#xff0c;第二列的表头可能为猫 也可能为狗&#xff1b;这是列数固定&#xff0c;列名不固定的场景&#xff1b; 场景二&#xff1…

〔 MySQL 〕数据类型

目录 1.数据类型分类 2 数值类型 2.1 tinyint类型 2.2 bit类型 2.3 小数类型 2.3.1 float 2.3.2 decimal 3 字符串类型 3.1 char 3.2 varchar 3.3 char和varchar比较 4 日期和时间类型 5 enum和set mysql表中建立属性列&#xff1a; 列名称&#xff0c;类型在后 n…

LlamaIndex

一、大语言模型开发框架 SDK:Software Development Kit,它是一组软件工具和资源的集合,旨在帮助开发者创建、测试、部署和维护应用程序或软件。 所有开发框架(SDK)的核心价值,都是降低开发、维护成本。 大语言模型开发框架的价值,是让开发者可以更方便地开发基于大语言…

【FFmpeg】FFmpeg 函数简介 ③ ( 编解码相关函数 | FFmpeg 源码地址 | FFmpeg 解码器相关 结构体 和 函数 )

文章目录 一、FFmpeg 解码器简介1、解码流程分析2、FFmpeg 编解码器 本质3、FFmpeg 编解码器 ID 和 名称 二、FFmpeg 解码器相关 结构体 / 函数1、AVFormatContext 结构体2、avcodec_find_decoder 函数 - 根据 ID 查找 解码器3、avcodec_find_decoder_by_name 函数 - 根据 名称…

Linux——GPIO输入输出裸机实验

学习了正点原子Linux环境下的GPIO的输入输出的裸机实验学习&#xff0c;现在进行一下小结&#xff1a; 启动文件start.S的编写 .global _start .global _bss_start _bss_start:.word __bss_start.global _bss_end _bss_end:.word __bss_end_start:/*设置处理器进入SVC模式*/m…

zabbix搭建钉钉告警流程

目录 &#x1f324;️zabbix实验规划 &#x1f324;️zabbix实验步骤 &#x1f4d1;1 使用钉钉添加一个自定义的机器人 ​ &#x1f4d1;2在zabbix-server上编写钉钉信息发送脚本&#xff0c;设置钉钉报警媒介 ☁️ 设置钉钉报警媒介​编辑​编辑 ☁️在添加消息模板​编辑​…

Java 多线程(三)—— 死锁

死锁的产生 我们先从简单的死锁最后到难一些的死锁问题开始展开讨论。 首先一个线程&#xff0c;一把锁&#xff0c;因为多次加锁而导致死锁问题&#xff0c;由于Java 的synchronized 实现了可重入锁&#xff0c;因此这个死锁问题就不存在了&#xff0c;意味着当一个线程拥有…

makefile 设置动态库路径参数

目录 一、makefile 动态库相关1.1 Libs 变量1.2 LDFLAGS 变量1.3 二者的作用和区别 二、设置方式2.1 编译时指定库路径2.2 运行时指定库路径 三、测试 一、makefile 动态库相关 1.1 Libs 变量 在 Makefile 中&#xff0c;Libs 通常是一个变量&#xff0c;用于存储链接器&…

Servlet入门 Servlet生命周期 Servlet体系结构

一.Servlet入门 1.Servlet介绍 Servlet (server applet) 是运行在服务端(tomcat)的Java小程序&#xff0c;是sun公司提供一套定义动态资源规范; 从代码层面上来讲Servlet就是一个接口 狭义的Servlet是指Java语言编写的一个接口。 广义的Servlet是指任何实现了这个Servlet接口…

穿越数据迷宫:C++哈希表的奇幻旅程

文章目录 前言&#x1f4d4;一、unordered系列关联式容器&#x1f4d5;1.1 unordered 容器概述&#x1f4d5;1.2 哈希表在 unordered 容器中的实现原理&#x1f4d5;1.3 unordered 容器的特点 &#x1f4d4;二、unordered_set 和 unordered_map 的基本操作&#x1f4d5;2.1 un…

飞牛云fnOS本地部署WordPress个人网站并一键发布公网远程访问

文章目录 前言1. Docker下载源设置2. Docker下载WordPress3. Docker部署Mysql数据库4. WordPress 参数设置5. 飞牛云安装Cpolar工具6. 固定Cpolar公网地址7. 修改WordPress配置文件8. 公网域名访问WordPress 前言 本文旨在详细介绍如何在飞牛云NAS上利用Docker部署WordPress&a…

2023年MathorCup数学建模B题城市轨道交通列车时刻表优化问题解题全过程文档加程序

2023年第十三届MathorCup高校数学建模挑战赛 B题 城市轨道交通列车时刻表优化问题 原题再现&#xff1a; 列车时刻表优化问题是轨道交通领域行车组织方式的经典问题之一。列车时刻表规定了列车在每个车站的到达和出发&#xff08;或通过&#xff09;时刻&#xff0c;其在实际…

安全见闻1-5

涵盖了编程语言、软件程序类型、操作系统、网络通讯、硬件设备、web前后端、脚本语言、病毒种类、服务器程序、人工智能等基本知识&#xff0c;有助于全面了解计算机科学和网络技术的各个方面。 安全见闻1 1.编程语言简要概述 C语言&#xff1a;面向过程&#xff0c;适用于系统…

闯关leetcode——3178. Find the Child Who Has the Ball After K Seconds

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/find-the-child-who-has-the-ball-after-k-seconds/description/ 内容 You are given two positive integers n and k. There are n children numbered from 0 to n - 1 standing in a queue in o…

Java结合ElasticSearch根据查询关键字,高亮显示全文数据。

由于es高亮显示机制的问题。当全文内容过多&#xff0c;且搜索中标又少时&#xff0c;就会出现高亮结果无法覆盖全文。因此需要根据需求手动替换。 1.根据es的ik分词器获取搜索词的分词结果。 es部分&#xff1a; //中文分词解析 post /_analyze {"analyzer":"…

Python——NumPy库的简单用法,超级详细教程使用

一、什么是NumPy库 NumPy&#xff1a;它是python的一个科学计算库函数&#xff0c;它是由c语言编写的 它应用于数据处理、机器学习、图像处理、文件操作等等 二、array函数 这里导入库numpy&#xff0c;命名为np&#xff0c;后面的np都是代表着是numpy函数 array函数表示创建…