uniapp页面间传参的方法

uniapp中,常见的页面传参方式有以下几种:

  1. URL传参

可以在跳转页面时,在url中添加参数,通过在目标页面的onLoad函数中的options参数获取传递的参数。示例代码如下:

在源页面中:

uni.navigateTo({
    url: '/pages/targetPage/index?id=123&name=test'
});

在目标页面中:

onLoad: function(options) {
    console.log(options.id);
    console.log(options.name);
}
  1. Vuex状态管理

可以在源页面设置一个state,然后在目标页面中获取该state的值。示例代码如下:

在源页面中:

this.$store.state.id = 123;
this.$store.state.name = 'test';
uni.navigateTo({
    url: '/pages/targetPage/index'
});

在目标页面中:

computed: {
    id: function() {
        return this.$store.state.id;
    },
    name: function() {
        return this.$store.state.name;
    }
}
  1. uni传参

可以在源页面使用uni对象的navigateTo方法传参,在目标页面中使用uni对象的getOpenerEventChannel方法获取传递的参数。示例代码如下:

在源页面中:

uni.navigateTo({
    url: '/pages/targetPage/index',
    success: function(res) {
        var channel = uni.getOpenerEventChannel();
        channel.emit('passData', {id: 123, name: 'test'});
    }
});

在目标页面中:

onLoad: function() {
    var _this = this;
    var channel = uni.getOpenerEventChannel();
    channel.on('passData', function(data) {
        _this.id = data.id;
        _this.name = data.name;
    });
}

其中,emit方法用于向目标页面传递数据,on方法用于监听由emit方法传递过来的数据。

相关推荐
运维阿江几秒前
【小白学HTML5】盒模型_第一讲
前端·html·html5
码界领航13 分钟前
【2025最新版】Chrome谷歌浏览器如何能恢复到之前的旧版本
前端·chrome
乐多_L1 小时前
使用vue3框架vue-next-admin导出表格excel(带图片)
前端·javascript·vue.js
南望无一1 小时前
React Native 0.70.x如何从本地安卓源码(ReactAndroid)构建
前端·react native
Mike_188702783511 小时前
1688代采下单API接口使用指南:实现商品采集与自动化下单
前端·python·自动化
鲨鱼辣椒️面1 小时前
HTML视口动画
前端·html
一小路一1 小时前
Go Web 开发基础:从入门到实战
服务器·前端·后端·面试·golang
堇舟1 小时前
HTML第一节
前端·html
纯粹要努力2 小时前
前端跨域问题及解决方案
前端·javascript·面试
小刘不知道叫啥2 小时前
React源码揭秘 | 启动入口
前端·react.js·前端框架