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

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のページ間のパラメータの受け渡しと戻りを実装することができます。 path パラメータの受け渡し、props パラメータの受け渡し、vuex パラメータの受け渡し、uni.navigateBack の受け渡し、EventBus の受け渡しなどを通じて、実際のニーズに応じて適切なメソッドを選択して、パラメータの受け渡しを実現できます。

以上がuniapp のページ間でパラメータの受け渡しとポストバックを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。