微信小程序中组件传参(三)：eventChannel页面间事件通信通道 navigateTo转跳页面通信

方法

页面间事件通信通道，被打开页面和当前页面之间的通讯。官方文档

• 注意： 只有通过wx.navigateTo()转跳页面打开的页面才有eventChannel实例对象否则为{}空对象。

1. EventChannel.emit(string eventName, any args)：触发一个事件。发射事件，当前页面可以向被打开页面发射，被打开页面也可以向当前页面发射。
2. EventChannel.on(string eventName, function fn(res))：持续监听一个事件。
3. EventChannel.once(string eventName, function fn(res))：监听一个事件一次，触发后失效。
4. EventChannel.off(string eventName, function fn)：取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数。

当前页面index

navigateTo的参数events

• 用于监听被打开页面发送到当前页面的数据。
• Object形式。key：被打开页面通过eventChannel.emit发射的事件变量名，value：回调函数(res)。
• 每一个参数表示为事件添加一个监听器，获取到被打开页面传递给当前页面的数据。

Page({
  onClickEventChannelAndGoToPag(){
    wx.navigateTo({
      url: '/pages/list/list',
      events: {
        cToFEventData: (res) => {
          console.log(res);
        }
      }
    })
  }
})

navigateTo的参数success

• success回调的参数res可以获取到eventChannel对象。
• 转跳成功的回调中可以通过res.eventChannel.emit向被打开页面传递数据。

Page({
  onClickEventChannelAndGoToPag(){
    wx.navigateTo({
      url: '/pages/list/list',
      success: (res)=>{
        res.eventChannel.emit('myEventObj', {name: 'tz',age: 10});
        res.eventChannel.emit('myEventData', 'tzof');
      }
    })
  })
})

被打开页面list

• 在生命周期内使用eventChannel方法。
• 在page中通过this.getOpenerEventChannel()方法可以获取eventChannel对象。
• 可以通过eventChannel.on监听当前页面发射的自定义事件。
• 可以通过eventChannel.emit向当前页面传递数据。

Page({
  onLoad(){
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('myEventData', (res) => {console.log(res);});
    eventChannel.emit('cToFEventData', 'ldsfjjlksfd');
  }
})

示例

Page({
  onClickEventChannelAndGoToPag() {
    wx.navigateTo({
      url: '/pages/list/list',
      // 页面间通信接口 用于监听 被打开页面 发送到 当前页面的数据。
      events: {
        // key：被打开页面通过eventChannel emit发射的事件变量名
        // value：回调函数
        // 为事件添加一个监听器，获取到被打开页面传递给当前页面的数据
        cToFEventData: (res) => {
          console.log(res);
        }
      },
      // 成功的回调函数
      success: (res) => {
        console.log(res);
        // 通过success回调的参数res可以获取到eventChannel对象
        // eventChannel对象提供了emit方法 可以发射事件同时携带参数
        // res.eventChannel.emit(变量, 参数)
        res.eventChannel.emit('myEventData', 'tzof');
        res.eventChannel.emit('myEventObj', {
          name: 'tz',
          age: 10
        })
      }
    })
  }
})

Page({
  onLoad(options) {
    console.log(options);
    // 只有通过转跳页面打开的页面才有eventChannel实例对象否则为{}空对象
    // 通过this.getOpenerEventChannel方法可以获取eventChannel对象
    const eventChannel = this.getOpenerEventChannel();
    // eventChannel对象提供的on方法 监听页面发射的自定义事件
    // eventChannel.on(变量,回调函数)
    eventChannel.on('myEventData', (res) => {
      console.log(res);
    })
    eventChannel.on('myEventObj', (res) => {
      console.log(res);
    })
    // 通过eventChannel提供的emit方法也可以向上一级传递数据(打开此页面的页面)
    eventChannel.emit('cToFEventData', 'ldsfjjlksfd')
  }
})