Heim Web-Frontend uni-app So implementieren Sie Parameterübergabe und Postback zwischen Seiten in Uniapp

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

Oct 27, 2023 pm 02:10 PM
uniapp Übergabe von Seitenparametern zurückkehren

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.

Pfadparameterübergabe
  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
}
Nach dem Login kopieren

props-Parameterübergabe
  1. 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>
Nach dem Login kopieren

vuex-Parameterübertragung
  1. 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
Nach dem Login kopieren

2. Postback

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

uni.navigateBack
  1. 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: '回传的参数'}
  })
}
Nach dem Login kopieren

EventBus Event Bus Postback
  1. 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: '回传的参数'}
})
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So starten Sie die Vorschau des von Webstorm entwickelten Uniapp-Projekts So starten Sie die Vorschau des von Webstorm entwickelten Uniapp-Projekts Apr 08, 2024 pm 06:42 PM

So starten Sie die Vorschau des von Webstorm entwickelten Uniapp-Projekts

Was ist besser, Uniapp oder Mui? Was ist besser, Uniapp oder Mui? Apr 06, 2024 am 05:18 AM

Was ist besser, Uniapp oder Mui?

Welche Entwicklungstools verwendet Uniapp? Welche Entwicklungstools verwendet Uniapp? Apr 06, 2024 am 04:27 AM

Welche Entwicklungstools verwendet Uniapp?

Welche Grundlagen sind zum Erlernen von uniapp erforderlich? Welche Grundlagen sind zum Erlernen von uniapp erforderlich? Apr 06, 2024 am 04:45 AM

Welche Grundlagen sind zum Erlernen von uniapp erforderlich?

Was sind die Nachteile von uniapp Was sind die Nachteile von uniapp Apr 06, 2024 am 04:06 AM

Was sind die Nachteile von uniapp

Ausführlicher Vergleich zwischen Flutter und Uniapp: Entdecken Sie ihre Ähnlichkeiten, Unterschiede und Eigenschaften Ausführlicher Vergleich zwischen Flutter und Uniapp: Entdecken Sie ihre Ähnlichkeiten, Unterschiede und Eigenschaften Dec 23, 2023 pm 02:16 PM

Ausführlicher Vergleich zwischen Flutter und Uniapp: Entdecken Sie ihre Ähnlichkeiten, Unterschiede und Eigenschaften

Was ist besser: Uniapp oder native Entwicklung? Was ist besser: Uniapp oder native Entwicklung? Apr 06, 2024 am 05:06 AM

Was ist besser: Uniapp oder native Entwicklung?

Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln? Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln? Apr 06, 2024 am 03:54 AM

Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln?

See all articles