如何在uniapp中实现页面间的传参和回传
一、传参
在uniapp中，我们可以通过路径传参、props传参和vuex传参的方式实现页面间的参数传递。
路径传参
路径传参指的是在跳转到另一个页面时，将参数直接拼接在URL后面传递。在跳转时，我们通过在URL后面加上参数的方式将参数传递给下一个页面，在下一个页面可以通过uni.getStorageSync()方法获取参数的值。
// 页面Auni.navigateTo({ url: '/pages/B/B?param1=123¶m2=456'})// 页面BonLoad: function (options) { console.log(options.param1) //输出123 console.log(options.param2) //输出456}
登录后复制props传参
props传参是将参数作为子组件的属性进行传递，在父组件中使用子组件时附加属性来传递参数。在子组件中通过this.$props获取传递的参数。
// 父组件export default { data() { return { param1: '123', param2: '456' } }}// 子组件{{ $props.param1 }}{{ $props.param2 }}
登录后复制vuex传参
vuex是uniapp中的状态管理工具，我们可以使用vuex来进行页面间的参数传递。在发送参数时，将参数存储到vuex的state中。在接收参数时，通过vuex的getters方法获取参数的值。
// 页面Aexport default { methods: { sendParam() { this.$store.commit('SET_PARAM', '参数值') uni.navigateTo({ url: '/pages/B/B' }) } }}// 页面BonLoad: function () { console.log(this.$store.getters.param) //输出参数值}// storeimport 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方法用于返回上一级页面，可以通过传递参数的方式进行回传。
// 页面Auni.navigateTo({ url: '/pages/B/B'})// 页面Buni.navigateBack({ delta: 1, success: function () { uni.getOpenerEventChannel().emit('acceptDataFromB', {data: '回传的参数'}) }})// 页面AonLoad: function () { const eventChannel = this.getOpenerEventChannel() eventChannel.on('acceptDataFromB', function (data) { console.log(data) //输出{data: '回传的参数'} })}
登录后复制EventBus事件总线回传
EventBus是用于组件之间的通信的工具，在uniapp中可以使用uni.$emit发布事件和uni.$on订阅事件的方式进行回传。
// 页面A// main.jsVue.prototype.$eventBus = new Vue()// 页面Bthis.$eventBus.$emit('acceptDataFromB', {data: '回传的参数'})uni.navigateBack({ delta: 1})// 页面Athis.$eventBus.$on('acceptDataFromB', function (data) { console.log(data) //输出{data: '回传的参数'}})
登录后复制
通过上述方法，我们可以在uniapp中实现页面间的参数传递和回传。通过路径传参、props传参、vuex传参以及uni.navigateBack回传和EventBus回传等方式可以根据实际需求选择适合的方法来实现参数的传递和回传。
以上就是如何在uniapp中实现页面间的传参和回传的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3024750.html
