uniapp日常总结--uniapp页面传值
uniapp日常总结--uniapp页面传值
在Uniapp中,不同页面之间传值可以通过以下几种方式实现:
- URL参数传递:
可以通过在跳转链接中添加参数,然后在目标页面通过
this.$route.params
或this.$route.query
来获取传递的参数。
<uni-link :url="'/pages/targetPage/targetPage?param1=' + value1 + '¶m2=' + value2">跳转到目标页面uni-link>// 在目标页面获取参数
export default {
mounted() {
const param1 = this.$route.params.param1;
const param2 = this.$route.params.param2;
console.log(param1, param2);
}
} - 使用页面参数(Query):
- 在触发页面跳转的地方,例如在一个按钮的点击事件中:
// 在当前页面的某个事件触发时跳转到目标页面,并传递参数
uni.navigateTo({
url: '/pages/targetPage/targetPage',
// 传递的参数,可以是一个对象
success(res) {
console.log(res);
},
fail(err) {
console.error(err);
},
// 参数传递方式,query 表示通过 URL 参数传递
// params 表示通过 path 参数传递
// 一般情况下使用 query 就可以了
// 使用 params 时,目标页面的路径需要定义成带参数的形式
// 如 '/pages/targetPage/targetPage/:param1/:param2'
method: 'query',
// 要传递的参数
query: {
key1: 'value1',
key2: 'value2'
}
});
//简写 在当前页面的某个事件触发时跳转到目标页面,并传递参数
uni.navigateTo({
url: '/pages/targetPage/targetPage?key1=value1&key2=value2',
});- 在目标页面中,可以通过
this.$route.query
来获取传递的参数:
export default {
onLoad(query) {
// 获取传递的参数
const key1 = this.$route.query.key1;
const key2 = this.$route.query.key2;
console.log(key1, key2);
},
// 其他页面生命周期或方法等
};
在目标页面的onLoad
生命周期中,this.$route.query
可以获取到传递的参数。key1
和key2
就是在跳转时传递的参数。如果使用uni.switchTab
方法进行页面跳转,是无法直接传递参数的。因为uni.switchTab
用于跳转到 tabBar 页面,而 tabBar 页面是在底部显示的固定页面,不支持传递参数。如果需要在 tabBar 页面之间传递参数,可以考虑使用全局变量、本地存储等方式进行参数传递。
使用Vuex进行全局状态管理,可以在一个页面中修改状态,而在另一个页面中获取最新的状态。
适用于需要在多个页面之间共享数据的情况。
如果你的应用使用了Vuex,可以在一个页面的computed
属性或methods
中触发commit
,然后在另一个页面通过this.$store.state
获取值。
在第一个页面:
// 在页面中触发commit
this.$store.commit('setValue', value);
在第二个页面:
// 在另一个页面获取值
const value = this.$store.state.value;
console.log(value);
使用本地存储(Storage):使用本地存储(localStorage或uni提供的存储API)将数据存储到本地,然后在另一个页面中读取。适用于需要持久保存数据的情况。如果数据不大,你也可以将数据存储在本地存储中,然后在目标页面读取。
其中根据使用情景可以使用同步StorageSync或者异步Storage来实现。
两者存在一定的区别,简单介绍可以查看下方链接:
uniapp日常总结--setStorageSync和setStorage区别
同步:使用uni.setStorageSync
和uni.getStorageSync
等方法,将数据存储在本地,然后在另一个页面读取。
// 在页面A中保存数据到本地存储
uni.setStorageSync('key', value);
// 在页面B中从本地存储中读取数据
const value = uni.getStorageSync('key');
console.log(value);
异步:使用uni.setStorage
和uni.getStorage
等方法,将数据存储在本地,然后在另一个页面读取。
// 在页面A中保存数据到本地存储
uni.setStorage({
key: 'yourDataKey',
data: yourData,
});
// 在页面B中从本地存储中读取数据
uni.getStorage({
key: 'yourDataKey',
success: function (res) {
const pageData = res.data;
},
});
事件总线:使用uni提供的API进行页面传值,如uni.$emit
和uni.$on
。
通过事件触发和监听的方式在页面之间传递数据。
使用Uniapp的事件总线来进行组件之间的通信。在发送组件中,使用uni.$emit
触发一个自定义事件,并在接收组件中使用uni.$on
监听这个事件。
在发送组件:
uni.$emit('customEvent', data);
在接收组件:
uni.$on('customEvent', (data) => {
console.log(data);
});
应用全局对象:通过uni.$app
访问应用全局对象,从而在不同页面之间共享数据。
在发送页面:
uni.$app.globalData.value = data;
在接收页面:
const value = uni.$app.globalData.value;
console.log(value);
URL参数传递对于简单的场景比较方便。Vuex适用于较大的应用状态管理。本地存储适用于需要在页面刷新后仍然保持的简单数据。事件总线方法适用于简单的组件通信。页面参数相对常用于跳转。根据具体需求和应用场景,选择合适的方式进行数据传递。不同的场景可能需要不同的方法。
来源:juejin.cn/post/7310786618390855717