uniapp跳转带回数据-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

uniapp跳转带回数据

在开发移动应用程序时，经常需要跨页面传递数据的场景。这时，我们可以利用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跳转带回数据的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~