在uniapp中页面之间通信简单的用法主要有以下几种方式:

转载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)
})

四、参考

uniapp页面通信

 如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,你的鼓励将是我创作的最大动力!

qq群933053581

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐