2023uniapp跳转带回数据

在开发移动应用程序时，经常需要跨页面传递数据的场景。这时，我们可以利用uniapp框架提供的数据传递方法来实现快速、方便的跨页面传递数据。

如何利用uniapp的数据传递方法来跳转并且带回数据呢？下面，我们将详细介绍。

一、跳转和回传的基本流程

1.在源页面（例如：index.vue）中，我们需要定义一个事件，用来处理返回的数据并将其保存在当前组件的data中。

<template>
  <view>
    <button @click="toDestination">前往目标页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      toDestination() {
        uni.navigateTo({
          url: '/pages/destination/destination',
          events: {
            acceptDataFromOpenedPage: function(data) {
              console.log('源页面接收到的数据：' + JSON.stringify(data));
              // 在这里可以将接收到的数据保存到当前组件的data中
              // 比如：this.setData({receivedData: data})
            }
          }
        })
      }
    }
  }
</script>

2.在目标页面（例如：destination.vue）中，我们需要定义一个事件，将我们想要传递的数据通过该事件返回到源页面。

<template>
  <view>
    <button @click="backToSource">回到源页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      backToSource() {
        var data = {
          name: '小明',
          age: 18,
          gender: '男'
        };
        uni.$emit('acceptDataFromOpenedPage', data);
        uni.navigateBack();
      }
    }
  }
</script>

在这个例子中，我们通过uni.$emit()方法将我们想要传递的数据返回到源页面，并在回调函数中触发acceptDataFromOpenedPage事件。同时，我们也调用uni.navigateBack()方法返回到源页面。

3.最后，在源页面中处理acceptDataFromOpenedPage事件的具体操作。在这个事件的回调函数中，我们可以将接收到的数据保存在当前组件的data中，从而实现跨页面传递数据的目的。

二、传递和回传数组类型的数据

在实际开发中，我们经常遇到传递和回传数组类型的数据的场景。在uniapp中，我们可以通过JSON字符串来实现这一目的。

例如，在源页面中：

<template>
  <view>
    <button @click="toDestination">前往目标页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      toDestination() {
        uni.navigateTo({
          url: '/pages/destination/destination',
          events: {
            acceptDataFromOpenedPage: function(data) {
              console.log('源页面接收到的数据：' + JSON.stringify(data));
              // 在这里可以将接收到的数据保存到当前组件的data中
              // 比如：this.setData({receivedData: data})
            }
          }
        })
      }
    }
  }
</script>

在目标页面中：

<template>
  <view>
    <button @click="backToSource">回到源页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      backToSource() {
        var dataArr = [
          {name: '小明', age: 18, gender: '男'},
          {name: '小红', age: 20, gender: '女'},
          {name: '小李', age: 22, gender: '男'}
        ];
        uni.setStorageSync('dataArr', JSON.stringify(dataArr));
        uni.navigateBack();
      }
    }
  }
</script>

在这个例子中，我们通过uni.setStorageSync()方法将数组类型的数据存储在本地存储中，并以JSON字符串的形式进行存储。同样地，在源页面中，我们需要通过JSON.parse()方法将JSON字符串类型的数据转换成数组类型的数据，从而实现数据的准确传递和回传。

三、总结

通过uniapp框架提供的方法，我们可以快速、方便地实现跨页面传递数据的目的。在使用时，我们需要定义好事件、回调函数等主要元素，遵守uniapp的规范，从而实现高效且精准的数据传递。

以上就是uniapp跳转带回数据的详细内容，更多请关注zzsucai.com其它相关文章！