uniapp jump brings back data

When developing mobile applications, there are often scenarios where data needs to be passed across pages. At this time, we can use the data transfer method provided by the uniapp framework to achieve fast and convenient cross-page data transfer.

How to use uniapp's data transfer method to jump and bring back data? Below, we’ll go into more detail.

1. Basic process of jump and postback

1. In the source page (for example: index.vue), we need to define an event to process the returned data and It is saved in the data of the current component.

<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. In the target page (for example: destination.vue), we need to define an event to return the data we want to pass to the source page through the event.

<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>

In this example, we return the data we want to pass to the source page through the uni.$emit() method, and trigger the acceptDataFromOpenedPage event in the callback function. At the same time, we also call the uni.navigateBack() method to return to the source page.

3. Finally, handle the specific operations of the acceptDataFromOpenedPage event in the source page. In the callback function of this event, we can save the received data in the data of the current component to achieve the purpose of passing data across pages.

2. Passing and returning array type data

In actual development, we often encounter scenarios of passing and returning array type data. In uniapp, we can achieve this through JSON string.

For example, in the source page:

<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>

In the target page:

<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>

In this example, we use the uni.setStorageSync() method to set the array type data Stored in local storage as a JSON string. Similarly, in the source page, we need to convert JSON string type data into array type data through the JSON.parse() method to achieve accurate transmission and return of data.

3. Summary

Through the methods provided by the uniapp framework, we can quickly and easily achieve the purpose of transferring data across pages. When using it, we need to define the main elements such as events and callback functions, and comply with the specifications of uniapp to achieve efficient and accurate data transmission.

The above is the detailed content of uniapp jump brings back data. For more information, please follow other related articles on the PHP Chinese website!