网页设计学习总结_海口企业自助建站_市场调研的基本流程_开鲁网站seo转接

前言

在 Vue 3 开发中，经常需要在不同组件或页面之间传递数据，例如从 index 页面获取某个数值（如 cntr、tradeId）后，将其传输到 form 页面进行填写或编辑

本文将介绍几种常见的数据传输方法，并为每种方法提供一个小的 Demo 代码示例

基本的知识推荐阅读：详细分析uni-app中的页面路由基本知识（附Demo）

总结对比

方法	适用场景	适用数据类型	是否持久化	数据是否暴露
URL 传参	传递简单数据（ID、状态值）	字符串、数字	否	是
eventChannel	navigateTo 方式传递复杂数据	对象、数组	否	否
Vuex	多个页面共享数据	对象、数组	是	否
localStorage	短期数据存储、页面刷新保持	对象、数组	是	否

推荐方案

1. 如果只是传递少量数据（如 ID），URL 传参最简单
2. 如果需要传递复杂对象（如 JSON），推荐 eventChannel
3. 如果多个页面共享数据，Vuex 是更好的选择
4. 如果需要在页面刷新后仍保留数据，localStorage 是不错的方案

一开始博主使用的第一种，后续由于参数过多，使用第二种：

1. URL 参数

适用于简单数据传递，如字符串、数字等

实现步骤

1. 在 index 页面使用 uni.navigateTo 或 this.$router.push 传递参数
2. 在 form 页面通过 onLoad(options) 或 this.$route.query 解析参数

index.vue

methods: {goToForm() {uni.navigateTo({url: `/pages/form/form?cntr=manong123&tradeId=1`});}
}

form.vue

onLoad(options) {this.cntr = options.cntr || "";this.tradeId = options.tradeId || "";
}

优缺点
✅ 适合小型数据传输，如 ID、状态值等
❌ 无法传输复杂对象（如 JSON），会导致数据丢失

2. eventChannel 通信

适用于需要传输复杂数据（如对象、数组）且不希望数据暴露在 URL 参数中的情况

实现步骤

1. index 页面通过 success 回调，使用 eventChannel.emit 传输数据
2. 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共享

适用于多个页面共享数据，或者希望数据在页面间持久化的情况

实现步骤

1. 在 Vuex 的 store 中定义 state 并提供 mutation
2. index 页面调用 commit 方法存入数据
3. 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

适用于页面刷新后仍需保持数据的情况，如缓存用户输入的信息

实现步骤

1. index 页面存入 localStorage
2. 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 限制
❌ 需要手动清理，否则可能导致存储过多无用数据