注册

uniapp日常总结--uniapp页面传值

uniapp日常总结--uniapp页面传值

在Uniapp中,不同页面之间传值可以通过以下几种方式实现:

  1. URL参数传递:

    可以通过在跳转链接中添加参数,然后在目标页面通过this.$route.paramsthis.$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);
    }
    }
  2. 使用页面参数(Query):

    1. 在触发页面跳转的地方,例如在一个按钮的点击事件中:
    // 在当前页面的某个事件触发时跳转到目标页面,并传递参数
    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',
    });
    1. 在目标页面中,可以通过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可以获取到传递的参数。key1key2就是在跳转时传递的参数。如果使用uni.switchTab方法进行页面跳转,是无法直接传递参数的。因为uni.switchTab用于跳转到 tabBar 页面,而 tabBar 页面是在底部显示的固定页面,不支持传递参数。如果需要在 tabBar 页面之间传递参数,可以考虑使用全局变量、本地存储等方式进行参数传递。

Vuex状态管理:

使用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.setStorageSyncuni.getStorageSync等方法,将数据存储在本地,然后在另一个页面读取。

// 在页面A中保存数据到本地存储
uni.setStorageSync('key', value);
// 在页面B中从本地存储中读取数据
const value = uni.getStorageSync('key');
console.log(value);

异步:使用uni.setStorageuni.getStorage等方法,将数据存储在本地,然后在另一个页面读取。

// 在页面A中保存数据到本地存储
uni.setStorage({
key: 'yourDataKey',
data: yourData,
});
// 在页面B中从本地存储中读取数据
uni.getStorage({
key: 'yourDataKey',
success: function (res) {
const pageData = res.data;
},
});
事件总线:

使用uni提供的API进行页面传值,如uni.$emituni.$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

0 个评论

要回复文章请先登录注册