Home > Article > Web Front-end > How to implement parameter passing and postback between pages in uniapp
How to implement parameter passing and return between pages in uniapp
1. Parameter passing
In uniapp, we can pass parameters through the path Parameters, props parameters and vuex parameters are used to transfer parameters between pages.
Path passing parameters refers to splicing parameters directly after the URL and passing them when jumping to another page. When jumping, we pass the parameters to the next page by adding parameters after the URL. On the next page, the value of the parameters can be obtained through the uni.getStorageSync() method.
// 页面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 passing is to pass the parameters as attributes of the subcomponent. When using the subcomponent in the parent component, additional attributes are added to pass the parameters. Get the passed parameters through this.$props in the child component.
// 父组件 <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 is a state management tool in uniapp. We can use vuex to transfer parameters between pages. When sending parameters, store the parameters in the state of vuex. When receiving parameters, obtain the value of the parameter through the getters method of 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, postback between pages can be achieved through the uni.navigateBack method and the EventBus event bus.
The uni.navigateBack method is used to return to the previous page, and can be passed back by passing parameters.
// 页面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 is a tool for communication between components. In uniapp, you can use uni.$emit to publish events and uni. $on subscribes to the event and returns it.
// 页面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: '回传的参数'} })
Through the above method, we can implement parameter transfer and return between pages in uniapp. Through path parameter passing, props parameter passing, vuex parameter passing, uni.navigateBack passing back and EventBus passing back, etc., you can choose the appropriate method according to actual needs to realize the passing and returning of parameters.
The above is the detailed content of How to implement parameter passing and postback between pages in uniapp. For more information, please follow other related articles on the PHP Chinese website!