uniapp中页面之间通信

在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