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方法传递过来的数据。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Bee+SpringBoot稳定的Sharding、Mongodb ORM功能(同步 Maven)

Hibernate/MyBatis+ plus +Sharding JDBC + 服务器托管网Jpa+ Spring data+ GraphQL+ App ORM (Android, 鸿蒙)=Bee 小巧玲珑！仅 860K, 还不到 1M, 但却是功能强大！ …