当前位置:   article > 正文

uniapp页面间传参的方法

uniapp页面间传参的方法

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

  1. URL传参

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

在源页面中:

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

在目标页面中:

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

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

在源页面中:

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

在目标页面中:

  1. computed: {
  2. id: function() {
  3. return this.$store.state.id;
  4. },
  5. name: function() {
  6. return this.$store.state.name;
  7. }
  8. }
  1. uni传参

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

在源页面中:

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

在目标页面中:

  1. onLoad: function() {
  2. var _this = this;
  3. var channel = uni.getOpenerEventChannel();
  4. channel.on('passData', function(data) {
  5. _this.id = data.id;
  6. _this.name = data.name;
  7. });
  8. }

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

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号