在uniapp中页面之间通信简单的用法主要有以下几种方式:
一、传参的形式
1.A页面传递参数给B页面
uni.navigateTo({
url: 'test?id=1&name=uniapp';
});
2.B页面接收A页面传递过来的参数
onLoad(option) {
let id = option.id || ''
let name = option.name || ''
}
二、使用uni.$emit()
和uni.$on()
进行通讯
1.A页面传递参数给B页面
//update是可以自定义的事件名,触发全局的自定义事件,附加参数都会传给监听器回调函数。
uni.$emit('update',{msg:'页面更新'})
2.其他任何页面希望接收A页面传递
onLoad() {
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
}
3.监听的页面最好在onUnload里面取消监听,否则可能会出现执行多次的情况
onUnload() {
uni.$off('update')
},
三、eventBus进行通信
1.此方式其实是类似第二种,首先在main.js里面定义好eventBus对象
Vue.prototype.$eventBus = new Vue()
2.发送事件
this.$eventBus.$emit('eventName',{msg:'数据'})
3.监听事件
this.$eventBus.$on('eventName',(res) => {
console.log(res)
})