如何在uniapp中實現頁面間的傳參和回傳
一、傳參
在uniapp中，我們可以通過路徑傳參、props傳參和vuex傳參的方式實現頁面間的參數傳遞。
- 路徑傳參
路徑傳參指的是在跳轉到另一個頁面時，將參數直接拼接在URL后面傳遞。在跳轉時，我們通過在URL后面加上參數的方式將參數傳遞給下一個頁面，在下一個頁面可以通過uni.getStorageSync()方法獲取參數的值。
// 頁面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傳參
props傳參是將參數作為子組件的屬性進行傳遞，在父組件中使用子組件時附加屬性來傳遞參數。在子組件中通過this.$props獲取傳遞的參數。
// 父組件
<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傳參
vuex是uniapp中的狀態管理工具，我們可以使用vuex來進行頁面間的參數傳遞。在發送參數時，將參數存儲到vuex的state中。在接收參數時，通過vuex的getters方法獲取參數的值。
// 頁面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
登錄后復制
二、回傳
在uniapp中，頁面之間的回傳可以通過uni.navigateBack方法以及EventBus事件總線來實現。
- uni.navigateBack回傳
uni.navigateBack方法用于返回上一級頁面，可以通過傳遞參數的方式進行回傳。
// 頁面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事件總線回傳
EventBus是用于組件之間的通信的工具，在uniapp中可以使用uni.$emit發布事件和uni.$on訂閱事件的方式進行回傳。
// 頁面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: '回傳的參數'}
})
登錄后復制
通過上述方法，我們可以在uniapp中實現頁面間的參數傳遞和回傳。通過路徑傳參、props傳參、vuex傳參以及uni.navigateBack回傳和EventBus回傳等方式可以根據實際需求選擇適合的方法來實現參數的傳遞和回傳。
以上就是如何在uniapp中實現頁面間的傳參和回傳的詳細內容，更多請關注www.92cms.cn其它相關文章！
<!–
–>
