uniapp不同页面传参-猿码集

uniapp不同页面传参

在进行uniapp开发时，我们需要跨页面传递参数，这是一个比较常见的需求。uniapp提供了多种方法进行页面传参，本文将介绍uniapp中不同页面之间传参的方法。

url传参是一种比较常见的传参方法，相比其他传参方法，使用简单，无需安装额外插件。在uniapp中使用url传参，我们需要在路由配置中进行参数配置。

例如，我们要在A页面跳转到B页面，并传递参数num=1，可以在A页面使用uni.navigateTo方法进行跳转：


uni.navigateTo({
  url: '/pages/b/b?num=1',
})

在B页面中可以通过this.$route.query来获取url中携带的参数：


export default {
  onLoad() {
    const num = parseFloat(this.$route.query.num)
    console.log(num)
  },
}

针对不同的参数类型，我们可以选择使用不同的解析方法：

解析整形参数：


parseInt(this.$route.query.num)

解析浮点型参数：


parseFloat(this.$route.query.num)

解析布尔型参数：


// 如果参数值为true，则返回true，否则返回false
this.$route.query.isTrue === 'true'

属性传参是一种通过组件属性来进行传参的方法。在父组件中，我们可以直接通过在子组件中加入属性的方式来传递参数。

例如，在A页面中使用组件B，并传递参数num=1，我们可以在A页面的template中这样写：

在组件B中，我们可以通过props来接收num参数：


export default {
  props: {
    num: {
      type: Number,
      default: 0,
    },
  }
}

此时，B组件的num属性值为1。

在uniapp中，我们也可以使用vuex来进行状态管理，从而实现页面传参的需求。相比其他传参方式，vuex的特点是全局共享状态，可以方便的在不同的页面之间进行传参。

例如，在A页面中要将参数num=1传递给B页面，在vuex中我们可以这样定义一个全局变量：


const store = new Vuex.Store({
  state: {
    num: 0,
  },
  mutations: {
    SET_NUM(state, num) {
      state.num = num
    },
  },
})

在A页面中，我们可以通过调用mutations中的SET_NUM方法来将num值更新到vuex中：


export default {
  mounted() {
    this.$store.commit('SET_NUM', 1)
  },
}

在B页面中，可以通过this.$store.state来获取num参数的值：


export default {
  mounted() {
    const num = this.$store.state.num
    console.log(num)
  },
}

EventBus是一种通过发布订阅模式实现的事件传递机制，可以实现在任意两个组件之间传递参数。使用EventBus需要引入事件总线文件，并在需要传递参数的组件中加入对应事件的监听。

例如，在A页面中使用EventBus来传递num参数到B页面：

1. 在src目录下创建eventbus.js文件，并定义EventBus：


import Vue from 'vue'
export const EventBus = new Vue()

2. 在A页面中发布事件并传递参数：


import { EventBus } from '@/eventbus'
export default {
  mounted() {
    EventBus.$emit('changeNum', 1)
  },
}

3. 在B页面中监听事件并获取参数：


import { EventBus } from '@/eventbus'
export default {
  created() {
    EventBus.$on('changeNum', num => {
      console.log(num)
    })
  },
}

以上就是uniapp中不同页面传参的方法。我们可以根据实际需求选择不同的方法进行传参。对于数据类型的传递，在接收数据时需要注意数据类型的转换，否则可能会导致传参失败或数据异常的情况。