小程序组件间通信方式大总结

小程序组件间通信方式

跳转携带数据方式一

使用wx.navigateTo方式

 wx.navigateTo({
      url: '/pag2/page2?name=wangfeng&age=19',
  })

直接拼接查询数据在跳转到的页面中的onload函数中的opstion中进行获取

跳转页面接收数据方式

 onLoad(options) {
    const name = options.name;
    const age = options.age
    this.setData({
      name,
      age
    })
  },

返回携带是数据方式

wx.navigateBack({
      delta: 1
    })
    const perpages = getCurrentPages();
    const page = perpages[perpages.length - 2]
    page.setData({
      message: "wangfeng"
  })

第一步需要获取到当前跳转的所有页面集合 是一个栈结构

第二步获取到上一个页面 (在上一个页面中预留好一个数据)

第三步调用上一个页面的setState把你需要的数据设置进去即可

跳转携带数据方式二

通过event事件进行传递

在一级页面中预留一个event事件在子页面跳转的时候获取到该页面进行派生就行

第一步预留接受事件的事件函数

navcilk() {
    wx.navigateTo({
      url: '/pag2/page2?name=wangfeng&age=19',
      events:{ //预留事件bus
        acceptsomeData(data){
          console.log("返回携带的数据为",data)
        }
      }
    })
  }

第二步在子页面中进行派生该事件

 const eventChannel = this.getOpenerEventChannel()
 //acceptsomeData监听的函数 后面为数据
    eventChannel.emit("acceptsomeData", {
      name: "wangfeng",
      age: 19
  })