携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

页面间通信

页面间通信

如果一个页面由另一个页面通过wx.navigateTo 打开，这两个页面间将建立一条数据通道：

• 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
• wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件

实例

• a页面跳转到b页面

 wx.navigateTo({
    url: '' ,
    events: { // 这里用来接收后面页面传递回来的数据
        getSendData: (res) => {
            this.setData({
                ame: res.name,
            })
        }
    } 
})

• b页面返回a页面

// 确定返回
confirm(e) {
    let item = e.currentTarget.dataset.item;
    let eventChannel = this.getOpenerEventChannel();
    eventChannel.emit('getSendData', item)
    wx.navigateBack()
},

组件间通信

组件间通信有3种方式

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 父组件可以通过 this.selectComponent 方法获取子组件实例对象，直接访问组件的任意数据和方法

实例

父组件调用子组件

<component-tag-name bindmyevent="onMyEvent" />

方法

Page({
  onMyEvent: function(e){
    e.detail
  }
})

自定义组件

<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

方法

methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }

其中 myEventOption 可以选择是否冒泡，是否捕获阶段等

  this.triggerEvent('customevent', {}) // 只会触发该事件
  this.triggerEvent('customevent', {}, { bubbles: true }) // 会冒泡，触发该事件和父事件
  this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会捕获

获取组件实例

可在父组件里调用 this.selectComponent ，获取子组件的实例对象。需传入一个匹配选择器 selector，如：this.selectComponent(".my-component")

// 父组件调用
const child = this.selectComponent('#the-id') 

事件处理函数

setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

其中callback是setData引起的界面更新渲染完毕后的回调函数

this.route

当前页面的全路径

onShow: function () {
    console.log(this.route)// pages/index/index
}