


So implementieren Sie Parameterübergabe und Postback zwischen Seiten in Uniapp
Oct 27, 2023 pm 02:10 PMSo 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- 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¶m2=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.
uni.navigateBack- 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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

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

Welche Entwicklungstools verwendet Uniapp?

Welche Grundlagen sind zum Erlernen von uniapp erforderlich?

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

Was ist besser: Uniapp oder native Entwicklung?

Welche Komponentenbibliothek verwendet Uniapp, um kleine Programme zu entwickeln?
