2023如何在uniapp中实现页面间的传参和回传

如何在uniapp中实现页面间的传参和回传

一、传参

在uniapp中，我们可以通过路径传参、props传参和vuex传参的方式实现页面间的参数传递。

1. 路径传参

路径传参指的是在跳转到另一个页面时，将参数直接拼接在URL后面传递。在跳转时，我们通过在URL后面加上参数的方式将参数传递给下一个页面，在下一个页面可以通过uni.getStorageSync()方法获取参数的值。

// 页面A
uni.navigateTo({
  url: '/pages/B/B?param1=123&param2=456'
})

// 页面B
onLoad: function (options) {
  console.log(options.param1) //输出123
  console.log(options.param2) //输出456
}

2. 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>

3. 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事件总线来实现。

1. 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: '回传的参数'}
  })
}

2. 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回传等方式可以根据实际需求选择适合的方法来实现参数的传递和回传。