Uniapp 五种传参方式在uniapp中,对于简单的参数传递，我们可以选择使用URL传参，对于复杂的场景，我们可以选

URL传参：在跳转到目标页面时，用'?'拼接可以在URL中添加参数来传递数据,多个参数用'&'进行拼接。在目标页面中，可以通过 this.$route.query 来获取传递过来的参数。

例如，在A页面中跳转到B页面，并传递参数id=123：

uni.navigateTo({
  url: '/pages/B?id=123'
});

在B页面中获取传递过来的参数：

export default {
  mounted() {
    const id = this.$route.query.id;
    console.log(id); // 输出：123
  }
};

// 注：如果需要传递多个参数使用&符号连接即可，示例： 

  getGoodsDetails(id, item){ 
          uni.navigateTo({ url: `getGoodsDetails?id=${id}&item=${item}` });

或者

  // 商品详情页通过 onLoad 生命周期中接传递过来的参数 id
 onLoad(option){
 console.log('上一个页面传递过来的参数', option)
 console.log('id', option.id)
 console.log('item', option.item)
 // 接下来就是你需要该id做些什么，比如通过id查询到该详情等
 }

传递数组或者对象

如需要传递的参数有很多时，由uniapp 跳转页面api 的 url 有长度限制，需使用以下方式进行数据传递：

 在A页面中跳转到B页面：


// item 为该列表的每一项的数据对象；encodeURIComponent 为uniapp 提供的api
getGoodsDetails(item) {
 uni.navigateTo({
 	 url: `getGoodsDetails?item=${encodeURIComponent(JSON.stringify(item))}`,
 });
}

     
   在B页面中获取传递过来的参数：    

     // 同样onLoad 生命周期中进行接收， decodeURIComponent 为uniapp 提供的api
      onLoad(option) {
   const item = JSON.parse(decodeURIComponent(option.item));
   console.log('上一个页面传递过来的参数对象'，item );
   // 接下来就是你需要该对象数据做些什么，当然这里你可以直接赋值给data绑定的数据
  this.objData = item;
  }

参数传递：在跳转到目标页面时，可以通过 uni.navigateTo 或 uni.redirectTo 的第二个参数传递参数。在目标页面中，可以通过 this.$options 来获取传递过来的参数。

例如，在A页面中跳转到B页面，并传递参数id=123：

uni.navigateTo({
url: '/pages/B',
success: (res) => {
  res.eventChannel.emit('passData', { id: 123 });
}  
});

在B页面中获取传递过来的参数：

export default {
 mounted() {
   const eventChannel = this.$options.eventChannel;
   eventChannel.on('passData', (data) => {
     console.log(data.id); // 输出：123
   });
 }
 };

使用props传递参数：在父组件中，可以通过在子组件标签上定义props属性，并传递相应的值来传递参数。

示例：

<!-- 父组件 -->
<template>
  <child-component :message="message"></child-component>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, child component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述示例中，父组件通过在子组件标签上绑定 :message="message" 来传递参数。子组件通过props属性 message 来接收参数，并在模板中显示。

使用事件传递参数：在子组件中，可以通过 $emit 方法触发一个自定义事件，并传递相应的参数。在父组件中，可以通过在子组件标签上监听该事件并执行相应的方法来接收参数。

示例：

<!-- 父组件 -->
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出：Hello, parent component!
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="emitCustomEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', 'Hello, parent component!');
    }
  }
};
</script>

在上述示例中，子组件通过点击按钮触发 emitCustomEvent 方法，并通过 $emit 方法触发自定义事件 custom-event 并传递参数。父组件通过在子组件标签上监听 custom-event 事件，并执行相应的方法来接收参数。

5.vuex

在uniapp中，可以使用Vuex进行状态管理，因此，我们也可以通过Vuex来进行参数传递。

(1) 在页面中创建store

在每个页面中，我们需要首先创建一个store来进行参数传递。如下所示：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

在所需页面页面中引入store，或者在main.js中全局注册,如下所示：

//局部页面引用
import store from '@/store/index'

//main.js全局引用

// 引入vue
import Vue from ‘vue‘

// 引入主组件
import App from ‘./App‘

// 引入store

import store from ‘./store‘

// 注册全局组件
new Vue(
  el: ‘#app‘,
  router,  // 注册路由
  store,  // 注册store
  components: APP, 
  template: <App/>
)

(2) 在页面中传递参数

在需要传递参数的页面中，可以通过提交mutation来将参数传递到store中。如下所示：

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

在提交mutation后，store中的对应state就被更新了。

(3) 在页面中获取参数

在需要获取参数的页面中，可以通过$store.state对象来获取store中存储的参数。如下所示：

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

需要注意的是，使用Vuex进行参数传递需要引入Vuex，并且需要在每个页面中都创建store。

Summary:

在uniapp中,对于简单的参数传递，我们可以选择使用URL传参，并且可以根据具体情况选择路由跳转或h5页面跳转。对于复杂的场景，我们可以选择使用Vuex来进行参数传递，但需要注意在每个页面中创建store。无论使用哪种方式，都需要根据实际需求进行选择。