注:此方法只支持跳转页面类型的信息传递
使用uniapp中的 $on 与 $emit 进行页面通讯
对于微信小程序的开发 我在使用uniapp的 $on 与 $emit 时遇到了数据传递无效、监听不到第一次传递数据等情况,应该是个BUG
解决方法如下
在数据发送页面:
1.给传递数据的页面按钮添加点击响应事件
2.在响应事件中使用 uni.$on 与 uni.$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触发的时候都会多执行一次自定义事件的回调函数。造成不可预料的副作用
这样 页面间通讯就搞定了