【uni-app框架】关于如何页面传参数的几种方法总结【更加推荐Vue全局变量传参】

怼烎@ 2021-08-24 20:49 354阅读 0赞

### **测试最终结果：** ###

**针对于页面传参请直接使用Vue的全局变量更方便 ，因为uni-app框架的uni.$emit()和$on() 虽然使用了定时器能接收到参数，但是不知道为什么第一次总是接收不到导致很多为！后续有时间在慢慢研究为什么？但是使用Vue的全局变量能搞定一切！**

如何使用uni.$emit()和uni.$on() 进行页面间通讯【有一个坑务必注意】

参考官方文档，然后记住一句话：

### **必须先跳转打开页面,才能发射参数,否则发射无效，接收页面无法接收** ###

**其次，如果遇到一次接收无效可能需要发送的时候增加一个定时器，不然接收$on的回调函数可能不执行**

参考官方文档：[https://ask.dcloud.net.cn/article/36010][https_ask.dcloud.net.cn_article_36010]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1][]

<template>
        <view>
            <button @tap="click">
                点击发射
            </button>
    
        </view>
    </template>
    
    <script>
        import Vue from "vue";
    
        export default {
            methods: {
                click() {
                    // 【非常重要】必须先跳转打开页面,才能发射参数,否则发射无效，接收页面无法接收
                    Vue.prototype.$uniReLaunch("/pages/test/test001");
                    uni.$emit("test", {
                        test: "成功",
                    });
                    console.log("发射事件test成功");
    
                },
            },
        };
    
    
    </script>

<template>
        <view></view>
    </template>
    
    <script>
        export default {
            onLoad() {
                uni.$on("test", (data) => {
                    console.log("接收事件test成功,data=", data);
                });
            },
        };
    
    </script>

[https_ask.dcloud.net.cn_article_36010]: https://ask.dcloud.net.cn/article/36010
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210813/bb3b76648ef9421784c39ce8d0bc0a76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70 1]: /images/20210813/a16e9b5dbf6149ad8f611f70d6338507.png