uniapp--微信小程序页面数据传递

注:此方法只支持跳转页面类型的信息传递

使用uniapp中的 $on 与 $emit 进行页面通讯

       对于微信小程序的开发  我在使用uniapp的 $on 与 $emit 时遇到了数据传递无效、监听不到第一次传递数据等情况,应该是个BUG

解决方法如下

在数据发送页面:

        1.给传递数据的页面按钮添加点击响应事件

         2.在响应事件中使用 uni.$onuni.$emit

                                uni.$emit(eventName,OBJECT)
        触发全局的自定事件。附加参数都会传给监听器回调。

其中eventName为事件名,OBJECT为触发事件附加参数

                               uni.$on(eventName,callback)

        监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数。
其中eventName为事件名,callback为事件

的回调函数。

methods: {    
            sendCard() {
                uni.$on('send', () => {
                    uni.$emit("cardMsg", this.my_card)
                    // 传参 或 传递一个对象 uni.$emit("cardMsg", {})
                    console.log('发送数据');
                })
                //跳转到数据所传递到的页面
                uni.navigateTo({
                    url: "../my_card/my_card"
                })
            }
        }

 在数据接收页面:

         3.在接收页面接收数据

 onReady() {
            uni.$on('cardMsg', (data)=> {
                //我把传过来的数据存到了 data 中
                this.my_card = data
                console.log('接收数据',data);
            })
            uni.$emit('send')
        }

        4.使用 uni.$off 移除监听事件

                             uni.$off([event, callback])

用来移除组件实例上绑定的自定义事件监听器。

该函数有两个参数, event 为指定移除的事件名称,callback 为指定回调函数。

 onUnload() {
            uni.$off('send')
            uni.$off('cardMsg')
        },

当我们没有清除自定义事件,就会在页面离开再进入后就会触发$on,每次离开页面再进入都会添加,所有$emit触发的时候都会多执行一次自定义事件的回调函数。造成不可预料的副作用

         这样 页面间通讯就搞定了 

uniapp--微信小程序页面数据传递_第1张图片

你可能感兴趣的:(微信小程序,uni-app,小程序,开发语言,vue)