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页面通信

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容