如何在uniapp中實(shí)現(xiàn)頁(yè)面間的傳參和回傳
一、傳參
在uniapp中，我們可以通過(guò)路徑傳參、props傳參和vuex傳參的方式實(shí)現(xiàn)頁(yè)面間的參數(shù)傳遞。
- 路徑傳參
路徑傳參指的是在跳轉(zhuǎn)到另一個(gè)頁(yè)面時(shí)，將參數(shù)直接拼接在URL后面?zhèn)鬟f。在跳轉(zhuǎn)時(shí)，我們通過(guò)在URL后面加上參數(shù)的方式將參數(shù)傳遞給下一個(gè)頁(yè)面，在下一個(gè)頁(yè)面可以通過(guò)uni.getStorageSync()方法獲取參數(shù)的值。
// 頁(yè)面A
uni.navigateTo({
url: '/pages/B/B?param1=123¶m2=456'
})
// 頁(yè)面B
onLoad: function (options) {
console.log(options.param1) //輸出123
console.log(options.param2) //輸出456
}
登錄后復(fù)制
- props傳參
props傳參是將參數(shù)作為子組件的屬性進(jìn)行傳遞，在父組件中使用子組件時(shí)附加屬性來(lái)傳遞參數(shù)。在子組件中通過(guò)this.$props獲取傳遞的參數(shù)。
// 父組件
<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>
登錄后復(fù)制
- vuex傳參
vuex是uniapp中的狀態(tài)管理工具，我們可以使用vuex來(lái)進(jìn)行頁(yè)面間的參數(shù)傳遞。在發(fā)送參數(shù)時(shí)，將參數(shù)存儲(chǔ)到vuex的state中。在接收參數(shù)時(shí)，通過(guò)vuex的getters方法獲取參數(shù)的值。
// 頁(yè)面A
<template>
<button @click="sendParam">傳遞參數(shù)</button>
</template>
<script>
export default {
methods: {
sendParam() {
this.$store.commit('SET_PARAM', '參數(shù)值')
uni.navigateTo({
url: '/pages/B/B'
})
}
}
}
</script>
// 頁(yè)面B
onLoad: function () {
console.log(this.$store.getters.param) //輸出參數(shù)值
}
// 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
登錄后復(fù)制
二、回傳
在uniapp中，頁(yè)面之間的回傳可以通過(guò)uni.navigateBack方法以及EventBus事件總線來(lái)實(shí)現(xiàn)。
- uni.navigateBack回傳
uni.navigateBack方法用于返回上一級(jí)頁(yè)面，可以通過(guò)傳遞參數(shù)的方式進(jìn)行回傳。
// 頁(yè)面A
uni.navigateTo({
url: '/pages/B/B'
})
// 頁(yè)面B
uni.navigateBack({
delta: 1,
success: function () {
uni.getOpenerEventChannel().emit('acceptDataFromB', {data: '回傳的參數(shù)'})
}
})
// 頁(yè)面A
onLoad: function () {
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('acceptDataFromB', function (data) {
console.log(data) //輸出{data: '回傳的參數(shù)'}
})
}
登錄后復(fù)制
- EventBus事件總線回傳
EventBus是用于組件之間的通信的工具，在uniapp中可以使用uni.$emit發(fā)布事件和uni.$on訂閱事件的方式進(jìn)行回傳。
// 頁(yè)面A
// main.js
Vue.prototype.$eventBus = new Vue()
// 頁(yè)面B
this.$eventBus.$emit('acceptDataFromB', {data: '回傳的參數(shù)'})
uni.navigateBack({
delta: 1
})
// 頁(yè)面A
this.$eventBus.$on('acceptDataFromB', function (data) {
console.log(data) //輸出{data: '回傳的參數(shù)'}
})
登錄后復(fù)制
通過(guò)上述方法，我們可以在uniapp中實(shí)現(xiàn)頁(yè)面間的參數(shù)傳遞和回傳。通過(guò)路徑傳參、props傳參、vuex傳參以及uni.navigateBack回傳和EventBus回傳等方式可以根據(jù)實(shí)際需求選擇適合的方法來(lái)實(shí)現(xiàn)參數(shù)的傳遞和回傳。
以上就是如何在uniapp中實(shí)現(xiàn)頁(yè)面間的傳參和回傳的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
<!–
–>
