So implementieren Sie Parameterübergabe und Postback zwischen Seiten in Uniapp

So implementieren Sie die Parameterübertragung und -rückgabe zwischen Seiten in Uniapp

1. Parameterübertragung: In Uniapp können wir Parameter zwischen Seiten durch Pfadparameterübertragung, Requisitenparameterübertragung und Vuex-Parameterübertragung realisieren.

1. Pfadparameterübergabe bedeutet, dass beim Springen zu einer anderen Seite die Parameter direkt nach der URL gespleißt und übergeben werden. Beim Springen übergeben wir die Parameter an die nächste Seite, indem wir Parameter nach der URL hinzufügen. Auf der nächsten Seite kann der Wert der Parameter über die Methode uni.getStorageSync() abgerufen werden.

// 页面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übergabe besteht darin, die Parameter als Attribute der Unterkomponente zu übergeben. Bei Verwendung der Unterkomponente in der übergeordneten Komponente werden zusätzliche Attribute hinzugefügt, um die Parameter zu übergeben. Rufen Sie die übergebenen Parameter über this.$props in der untergeordneten Komponente ab.

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

vuex ist ein Statusverwaltungstool in Uniapp. Wir können vuex verwenden, um Parameter zwischen Seiten zu übertragen. Speichern Sie beim Senden von Parametern die Parameter im Status von vuex. Erhalten Sie beim Empfang von Parametern den Wert des Parameters über die Getter-Methode von 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

In uniapp kann ein Postback zwischen Seiten über die uni.navigateBack-Methode und den EventBus-Ereignisbus erreicht werden.

Die Methode uni.navigateBack wird verwendet, um zur vorherigen Seite zurückzukehren und kann durch Übergabe von Parametern zurückgegeben werden.

// 页面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 ist ein Tool für die Kommunikation zwischen Komponenten. In uniapp können Sie uni.$emit zum Veröffentlichen von Ereignissen und uni.$on zum Abonnieren von Ereignissen für das Postback verwenden.

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

Durch die obige Methode können wir die Parameterübertragung und -rückgabe zwischen Seiten in Uniapp implementieren. Durch Pfadparameterübergabe, Requisitenparameterübergabe, Vuex-Parameterübergabe, uni.navigateBack-Rückübergabe und EventBus-Rückübergabe usw. können Sie die geeignete Methode entsprechend den tatsächlichen Anforderungen auswählen, um die Übergabe und Rückgabe von Parametern zu realisieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Parameterübergabe und Postback zwischen Seiten in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!