uniapp 점프는 데이터를 다시 가져옵니다

모바일 애플리케이션을 개발할 때 페이지 간에 데이터를 전달해야 하는 시나리오가 종종 있습니다. 이때 uniapp 프레임워크에서 제공하는 데이터 전송 방법을 사용하여 빠르고 편리한 페이지 간 데이터 전송을 달성할 수 있습니다.

uniapp의 데이터 전송 방법을 사용하여 데이터를 점프하고 다시 가져오는 방법은 무엇입니까? 아래에서 좀 더 자세히 알아보겠습니다.

1. 점프 및 포스트백의 기본 프로세스

1. 소스 페이지(예: index.vue)에서 반환된 데이터를 처리하고 이를 현재 구성 요소의 데이터에 저장하기 위한 이벤트를 정의해야 합니다.

<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 이벤트의 특정 작업을 처리합니다. 이 이벤트의 콜백 함수에서는 수신된 데이터를 현재 구성 요소의 데이터에 저장하여 페이지 간에 데이터를 전달하는 목적을 달성할 수 있습니다.

2. 배열형 데이터 전달 및 반환

실제 개발에서는 배열형 데이터를 전달하고 반환하는 시나리오를 자주 접하게 됩니다. 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 문자열 형태의 데이터를 배열 형태의 데이터로 변환해야 정확한 데이터 전송 및 반환이 가능합니다.

3. 요약

uniapp 프레임워크에서 제공하는 방법을 통해 페이지 간 데이터 전송 목적을 빠르고 쉽게 달성할 수 있습니다. 이를 사용할 때 효율적이고 정확한 데이터 전송을 위해서는 이벤트, 콜백 함수 등 주요 요소를 정의하고 유니앱의 사양을 준수해야 합니다.

위 내용은 uniapp 점프는 데이터를 다시 가져옵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!