Cara melaksanakan penghantaran parameter dan pos balik antara halaman dalam uniapp

.

Path parameter passing

Path parameter passing bermakna apabila melompat ke halaman lain, parameter disambung terus selepas URL dan diluluskan. Apabila melompat, kami menghantar parameter ke halaman seterusnya dengan menambah parameter selepas URL Pada halaman seterusnya, nilai parameter boleh diperolehi melalui kaedah 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
}

props parameter passing

1. props parameter passing adalah untuk lulus parameter sebagai atribut subkomponen Apabila menggunakan subkomponen dalam komponen induk, atribut tambahan ditambahkan untuk lulus parameter. Dapatkan parameter yang diluluskan melalui ini.$props dalam komponen anak.

// 父组件
<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>

pemindahan parameter vuex

2. vuex ialah alat pengurusan keadaan dalam uniapp Kami boleh menggunakan vuex untuk memindahkan parameter antara halaman. Apabila menghantar parameter, simpan parameter dalam keadaan vuex. Apabila menerima parameter, dapatkan nilai parameter melalui kaedah getters vuex.

// 页面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. Postback

Dalam uniapp, postback antara halaman boleh dicapai melalui kaedah uni.navigateBack dan bas acara EventBus.

uni.navigateBack

Kaedah uni.navigateBack digunakan untuk kembali ke halaman sebelumnya dan boleh dihantar kembali dengan menghantar parameter.

// 页面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: '回传的参数'}
  })
}

EventBus bas acara pos balik

1. EventBus ialah alat yang digunakan untuk komunikasi antara komponen Dalam uniapp, anda boleh menggunakan uni.$emit untuk menerbitkan acara dan uni.$on untuk melanggan acara untuk pos balik.

// 页面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: '回传的参数'}
})

Melalui kaedah di atas, kami boleh melaksanakan pemindahan parameter dan kembali antara halaman dalam uniapp. Melalui laluan parameter laluan, props parameter passing, vuex parameter passing, uni.navigateBack passing back dan EventBus passing back, dsb., anda boleh memilih kaedah yang sesuai mengikut keperluan sebenar untuk merealisasikan lulus dan kembali parameter.

Atas ialah kandungan terperinci Cara melaksanakan penghantaran parameter dan pos balik antara halaman dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!