页面间通信
方式一(EventChannel)
如果一个页面通过wx.navigateTo
打开一个新页面,这两个页面间将建立一条数据通道
- 在
wx.navigateTo
的success
回调中通过EventChannel
对象发射事件 - 被打开的页面可以通过
this.getOpenerEventChannel
方法获得一个eventChannel
对象,进行监听、发射事件 wx.navigateTo
方法中可以定义events配置项接收被打开页面发射的事件
页面
handler(){
wx.navigateTo({
url: '/pages/logs/logs',
events:{
// key 被打开页面通过eventChannel发射的事件
// value 回调函数,获取被打开页面传递给当前页面的数据
currentEvent:(res)=>{
console.log("currentEvent",res);
}
},
success(res){
// 通过 success 回调函数,可以获取 eventChannel 对象
// eventChannel 对象提供了 emit 方法,可以发射事件,同时携带参数
res.eventChannel.emit("myEvent",{name:"a"})
}
})
},
被打开页面
// logs
lifetimes: {
attached() {
// 通过getOpenerEventChannel获取eventChannel对象
const EventChannel=this.getOpenerEventChannel();
// 通过eventChannel提供的 on 方法,监听页面发射的自定义事件
EventChannel.on("myEvent",(res)=>{
console.log("myEvent on",res)
})
// 通过EventChannel提供的emit方法,也可以向上一个页面传递数据
// 需要使用emit定义自定义事件,携带需要传递的参数、
EventChannel.emit("currentEvent",{age:18})
方式二(事件总线)
事件总线是对发布订阅模式的一种实现,是一种集中式事件处理机制,允许不同组件之间进行彼此通信。可以借助第三方的发布订阅JS包,来实现事件总线功能PubSubJs:https://www.npmjs.com/package/pubsub-js
npm install pubsub-js
import PubSub from 'pubsub-js'
sendData(){
// publish 用来发布自定的事件
// 有两个参数 1.自定义事件名称 2.需要传递的数据
PubSub.publish("myEvent",this.data.name)
},
import PubSub from 'pubsub-js'
......
lifetimes: {
attached() {
// subscribe 订阅、监听的自定义事件
// 两个参数 1.需要监听的自定义事件名称 2.回调函数
// 回调函数有两个参数 1.msg:自定义事件名称 2.data:传递过来的数据
PubSub.subscribe("myEvent",(msg,data)=>{
console.log("subscribe",msg,data)
});