uniapp에서 페이지 간 매개변수 전달 및 포스트백을 구현하는 방법

uniapp에서 페이지 간 매개변수 전달 및 반환을 구현하는 방법

1. 매개변수 전달

uniapp에서는 경로 전달, props 전달 및 vuex 전달을 통해 페이지 간 매개변수를 전달할 수 있습니다.

1. 경로 매개변수 전달

경로 매개변수 전달은 다른 페이지로 이동할 때 URL 뒤에 매개변수를 직접 연결하여 전달하는 것을 의미합니다. 점프할 때 URL 뒤에 매개변수를 추가하여 다음 페이지로 매개변수를 전달합니다. 다음 페이지에서는 uni.getStorageSync() 메소드를 통해 매개변수의 값을 얻을 수 있습니다.

// 页面A
uni.navigateTo({
  url: '/pages/B/B?param1=123&param2=456'
})

// 页面B
onLoad: function (options) {
  console.log(options.param1) //输出123
  console.log(options.param2) //输出456
}

2. props 매개변수 전달

props 매개변수 전달은 매개변수를 하위 구성요소의 속성으로 전달하는 것입니다. 상위 구성요소에서 하위 구성요소를 사용할 때 매개변수를 전달하기 위한 추가 속성이 추가됩니다. 하위 구성 요소의 this.$props를 통해 전달된 매개 변수를 가져옵니다.

// 父组件
<template>
  <child-component :param1="param1"></child-component>
</template>

<script>
export default {
  data() {
    return {
      param1: '123',
      param2: '456'
    }
  }
}
</script>

// 子组件
<template>
  <view>{{ $props.param1 }}</view>
  <view>{{ $props.param2 }}</view>
</template>

3. vuex 매개변수 전송

vuex는 uniapp의 상태 관리 도구로, vuex를 사용하여 페이지 간에 매개변수를 전송할 수 있습니다. 매개변수를 보낼 때 매개변수를 vuex 상태로 저장합니다. 매개변수를 받을 때 vuex의 getters 메소드를 통해 매개변수의 값을 얻습니다.

// 页面A
<template>
  <button @click="sendParam">传递参数</button>
</template>

<script>
export default {
  methods: {
    sendParam() {
      this.$store.commit('SET_PARAM', '参数值')
      uni.navigateTo({
        url: '/pages/B/B'
      })
    }
  }
}
</script>

// 页面B
onLoad: function () {
  console.log(this.$store.getters.param) //输出参数值
}

// store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    param: ''
  },
  mutations: {
    SET_PARAM(state, value) {
      state.param = value
    }
  },
  getters: {
    param: state => state.param
  }
})

export default store

2. 포스트백

uniapp에서는 uni.navigateBack 메소드와 EventBus 이벤트 버스를 통해 페이지 간 포스트백이 가능합니다.

1. uni.navigateBack

uni.navigateBack 메소드는 이전 페이지로 돌아가는 데 사용되며 매개변수를 전달하여 다시 전달할 수 있습니다.

// 页面A
uni.navigateTo({
  url: '/pages/B/B'
})

// 页面B
uni.navigateBack({
  delta: 1,
  success: function () {
    uni.getOpenerEventChannel().emit('acceptDataFromB', {data: '回传的参数'})
  }
})

// 页面A
onLoad: function () {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('acceptDataFromB', function (data) {
    console.log(data) //输出{data: '回传的参数'}
  })
}

2. EventBus 이벤트 버스 포스트백

EventBus는 구성요소 간 통신을 위한 도구입니다. uniapp에서는 uni.$emit을 사용하여 이벤트를 게시하고 uni.$on을 사용하여 포스트백용 이벤트를 구독할 수 있습니다.

// 页面A
// main.js
Vue.prototype.$eventBus = new Vue()

// 页面B
this.$eventBus.$emit('acceptDataFromB', {data: '回传的参数'})
uni.navigateBack({
  delta: 1
})

// 页面A
this.$eventBus.$on('acceptDataFromB', function (data) {
  console.log(data) //输出{data: '回传的参数'}
})

위 방법을 통해 uniapp에서 페이지 간 매개변수 전송 및 반환을 구현할 수 있습니다. 경로 매개변수 전달, props 매개변수 전달, vuex 매개변수 전달, uni.navigateBack 전달 및 EventBus 전달 등을 통해 실제 요구에 따라 적절한 방법을 선택하여 매개변수 전달 및 반환을 실현할 수 있습니다.

위 내용은 uniapp에서 페이지 간 매개변수 전달 및 포스트백을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!