文章目录

• 通信方法
• • 组件通信
  • • properties
    • triggerEvent
    • selectComponent
  • 页面通信
  • • getCurrentPages
    • wx.navigateTo
  • 全局通信
  • • globalData
    • storage

通信方法

组件通信

properties

父组件向子组件通信，与 Vue 的 props 作用相同。

父组件向子组件传数据：

{list}}">

子组件接收数据：

Component({properties:{list:{type: Array,value: []}},attached(){console.log(this.list)}
})

triggerEvent

子组件向父组件通信，与 Vue 的 $emit 作用相同

子组件触发自定义事件：

Component({attached(){this.triggerEvent('customEvent',{ id: 10 })}
})

父组件接收自定义事件：

{list}}" bind:customEvent="customEvent">

Page({customEvent(e){console.log(e.detail.id)}
})

selectComponent

使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象，类似 Vue 的 ref
注意：获取节点实例应该放在 onReady 生命周期函数中

{list}}">

Page({onLoad(){let mycomponent = this.selectComponent('#mycomponent')mycomponent.setData({list: []})}
})

页面通信

getCurrentPages

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

跨页面赋值：

 let pages = getCurrentPages();//当前页面栈let prevPage = pages[pages.length - 2];//上一页面prevPage.setData({//直接给上一页面赋值，例如：上一页面的地址等于本页面地址的赋值address:this.data.userAddress});

跨页面调用方法：

 let pages = getCurrentPages();//当前页面栈let prevPage = pages[pages.length - 2];//上一页面prePage.computeFreight();

页面跳转后自动刷新：

wx.switchTab({url: '../index/index',success: function (e) {var page = getCurrentPages().pop(); //当前页面if (page == undefined || page == null) return;page.onLoad(); //或者其它操作}
})

获取当前页面相关信息：

 let pages = getCurrentPages(); //当前页面栈//当前页面为页面栈的最后一个元素(如下两方法等同)let prevPage = pages[pages.length - 1];//当前页面// or// pop() 方法用于删除并返回数组的最后一个元素let prevPage = pages.pop();//当前页面console.log( prevPage.route ) //举例：输出为‘pages/index/index’

wx.navigateTo

wx.navigateTo({url: 'test?id=1',events: {// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据acceptDataFromOpenedPage: function(data) {console.log(data)},someEvent: function(data) {console.log(data)}...},success: function(res) {// 通过 eventChannel 向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })}
})

//test.js
Page({onLoad: function(option){console.log(option.query)const eventChannel = this.getOpenerEventChannel()eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});eventChannel.emit('someEvent', {data: 'test'});// 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据eventChannel.on('acceptDataFromOpenerPage', function(data) {console.log(data)})}
})

全局通信

globalData

将数据挂载到 app.js，这种方式在开发中很常用。通过getApp()，我们能够在任何一个页面内访问到app实例。

App({globalData:{list:[]}
})

const app = getApp()
Page({onLoad(){app.globalData.list.push({id: 10})}
})

storage

storage并不是作为通信的主要方式。storage 主要是为了缓存数据，并且最多只能存储10M的数据。

wx.setStorageSync('timestamp', Date.now())
wx.getStorageSync('timestamp')
wx.removeStorageSync('timestamp')