Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解
前言
在 Vue 3 开发中，经常需要在不同组件或页面之间传递数据，例如从 index 页面获取某个数值（如 cntr、tradeId）后，将其传输到 form 页面进行填写或编辑
本文将介绍几种常见的数据传输方法，并为每种方法提供一个小的 Demo 代码示例
总结对比
| 方法 | 适用场景 | 适用数据类型 | 是否持久化 | 数据是否暴露 |
|---|---|---|---|---|
| URL 传参 | 传递简单数据（ID、状态值） | 字符串、数字 | 否 | 是 |
| eventChannel | navigateTo 方式传递复杂数据 | 对象、数组 | 否 | 否 |
| Vuex | 多个页面共享数据 | 对象、数组 | 是 | 否 |
| localStorage | 短期数据存储、页面刷新保持 | 对象、数组 | 是 | 否 |
推荐方案
- 如果只是传递少量数据（如 ID），URL 传参最简单
- 如果需要传递复杂对象（如 JSON），推荐 eventChannel
- 如果多个页面共享数据，Vuex 是更好的选择
- 如果需要在页面刷新后仍保留数据，localStorage 是不错的方案
一开始博主使用的第一种，后续由于参数过多，使用第二种：
1. URL 参数
适用于简单数据传递，如字符串、数字等
实现步骤
- 在 index 页面使用
uni.navigateTo或this.$router.push传递参数 - 在 form 页面通过
onLoad(options)或this.$route.query解析参数
index.vue
methods: {
goToForm() {
uni.navigateTo({
url: `/pages/form/form?cntr=manong123&tradeId=1`
});
}
}
form.vue
优缺点
优点：适合小型数据传输，如 ID、状态值等
缺点：无法传输复杂对象（如 JSON），会导致数据丢失
2. eventChannel 通信
适用于需要传输复杂数据（如对象、数组）且不希望数据暴露在 URL 参数中的情况
实现步骤
- index 页面通过 success 回调，使用
eventChannel.emit传输数据 - form 页面通过
getOpenerEventChannel().on监听并接收数据
index.vue
methods: {
goToForm() {
uni.navigateTo({
url: `/pages/form/form`,
success: (page) => {
if (page.eventChannel) {
page.eventChannel.emit("setItemData", {
cntr: "manong123",
tradeId: "1",
driverName: "码农研究僧"
});
}
}
});
}
}
form.vue
onLoad(options) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.on("setItemData", (itemData) => {
this.itemData = itemData;
});
}
优缺点
优点：
适合传输复杂数据，如 JSON 对象
数据不会暴露在 URL，安全性较高
缺点：仅适用于 uni.navigateTo 方式，不适用于 redirectTo 或 switchTab
3. Vuex共享
适用于多个页面共享数据，或者希望数据在页面间持久化的情况
实现步骤
- 在 Vuex 的 store 中定义 state 并提供 mutation
- index 页面调用 commit 方法存入数据
- form 页面通过 mapState 获取数据
store/index.js
export default {
state: {
itemData: {}
},
mutations: {
setItemData(state, data) {
state.itemData = data;
}
}
};
index.vue
methods: {
goToForm() {
this.$store.commit("setItemData", {
cntr: "manong123",
tradeId: "1",
driverName: "码农研究僧"
});
uni.navigateTo({ url: "/pages/form/form" });
}
}
form.vue
computed: {
itemData() {
return this.$store.state.itemData;
}
}
优缺点
优点：
适用于全局状态管理，多页面数据共享
数据不会丢失，即使用户返回上一页
缺点：适用于大规模项目，小项目可能不必要
4. localStorage 或 sessionStorage
适用于页面刷新后仍需保持数据的情况，如缓存用户输入的信息
实现步骤
- index 页面存入 localStorage
- form 页面从 localStorage 读取数据
index.vue
methods: {
goToForm() {
uni.setStorageSync("itemData", {
cntr: "manong123",
tradeId: "1",
driverName: "码农研究僧"
});
uni.navigateTo({ url: "/pages/form/form" });
}
}
form.vue
onLoad(options) {
this.itemData = uni.getStorageSync("itemData") || {};
}
优缺点
优点：
适用于短期存储，页面刷新后数据仍可用
可用于 redirectTo、switchTab，不受 eventChannel 限制
缺点：
需要手动清理，否则可能导致存储过多无用数据
以上就是Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解的详细内容，更多关于Vue3页面传输数值的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Vue如何使用PDF.js实现浏览pdf文件功能，文中的实现步骤讲解详细，具有一定的借鉴价值，需要的可以参考一下2023-04-04
这篇文章主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下2019-04-04
this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom,下面这篇文章主要给大家介绍了关于Vue中this.$nextTick()的理解与使用的相关资料,需要的朋友可以参考下2022-02-02
目前vite主要默认是支持给vue3使用的,并且如果使用官方的cli创建的项目一样会默认使用vue3去构建项目,此时对于一些vue2的老项目就显得不友好了,下面这篇文章主要给大家介绍了关于vue2老项目vite升级改造的相关资料,需要的朋友可以参考下2022-12-12
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的组件库,在使用 Element-Plus 进行开发时,我们可能会遇到需要自定义组件样式的情况,本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框,需要的朋友可以参考下2024-03-03
这篇文章主要给大家介绍了关于实现Vue3版抖音滑动插件踩坑指南,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了vue tree封装一个可选的树组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
Vue3使用echarts tree高度自适应支持滚动查看功能
这篇文章主要介绍了Vue3使用echarts tree高度自适应支持滚动查看功能,文章同通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue-cli工程webpack的基本用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
最新评论