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

相关推荐

  1. uniapp页面方法

    2024-03-10 07:38:03       25 阅读
  2. uniapp页面几种方式

    2024-03-10 07:38:03       34 阅读
  3. uniapp页面怎么

    2024-03-10 07:38:03       17 阅读
  4. 小程序页面路由方法

    2024-03-10 07:38:03       28 阅读
  5. Uniapp页面复杂对象

    2024-03-10 07:38:03       11 阅读
  6. uni-app页面数据方式

    2024-03-10 07:38:03       39 阅读
  7. C# 方法

    2024-03-10 07:38:03       22 阅读
  8. 小程序页面路由方法

    2024-03-10 07:38:03       8 阅读
  9. axios方式

    2024-03-10 07:38:03       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-10 07:38:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-10 07:38:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-10 07:38:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-10 07:38:03       20 阅读

热门阅读

  1. vue,pinia,state备忘

    2024-03-10 07:38:03       29 阅读
  2. C#位移运算,位运算

    2024-03-10 07:38:03       24 阅读
  3. 【Python2】---Jmeter工具的项目实战

    2024-03-10 07:38:03       21 阅读
  4. 机器学习(1)基础概念

    2024-03-10 07:38:03       22 阅读
  5. k8s安全控制、授权管理介绍

    2024-03-10 07:38:03       18 阅读
  6. uniapp 使用定时器和取消定时器

    2024-03-10 07:38:03       21 阅读
  7. Mac(含M1) 使用 brew 安装nvm

    2024-03-10 07:38:03       18 阅读
  8. Mac和Linux中的chmod +x命令详解

    2024-03-10 07:38:03       24 阅读
  9. mac上传本地文件到远程阿里云

    2024-03-10 07:38:03       23 阅读
  10. 【每日前端面经】2024-03-09

    2024-03-10 07:38:03       19 阅读
  11. tensorflow 的学习与应用

    2024-03-10 07:38:03       21 阅读