Article directory
Communication method
component communication
properties
The parent component communicates with the child component, which is the same as Vue's props.
Pass data from parent component to child component:
<my-component list="{
{list}}"></my-component>
Subcomponents receive data:
Component({
properties:{
list:{
type: Array,
value: []
}
},
attached(){
console.log(this.list)
}
})
triggerEvent
The child component communicates with the parent component, which has the same effect as Vue's $emit
Child components trigger custom events:
Component({
attached(){
this.triggerEvent('customEvent',{
id: 10 })
}
})
Parent component receives custom events:
<my-component list="{
{list}}" bind:customEvent="customEvent"></my-component>
Page({
customEvent(e){
console.log(e.detail.id)
}
})
selectComponent
Use the selector to select the component instance node, and return the first matched component instance object, similar to Vue's ref
注意：获取节点实例应该放在 onReady 生命周期函数中
<my-component id="mycomponent" list="{
{list}}"></my-component>
Page({
onLoad(){
let mycomponent = this.selectComponent('#mycomponent')
mycomponent.setData({
list: []
})
}
})
page communication
getCurrentPages
getCurrentPages()The function is used to obtain the instance of the current page stack, which is given in the order of the stack in the form of an array, the first element is the home page, and the last element is the current page.
Assignment across pages:
let pages = getCurrentPages();//当前页面栈
let prevPage = pages[pages.length - 2];//上一页面
prevPage.setData({
//直接给上一页面赋值，例如：上一页面的地址等于本页面地址的赋值
address:this.data.userAddress
});
Call method across pages:
let pages = getCurrentPages();//当前页面栈
let prevPage = pages[pages.length - 2];//上一页面
prePage.computeFreight();
Automatic refresh after page jump:
wx.switchTab({
url: '../index/index',
success: function (e) {
var page = getCurrentPages().pop(); //当前页面
if (page == undefined || page == null) return;
page.onLoad(); //或者其它操作
}
})
Get information about the current page:
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)
})
}
})
global communication
globalData
Mount data to app.js, which is commonly used in development. Through getApp(), we can access the app instance in any page.
App({
globalData:{
list:[]
}
})
const app = getApp()
Page({
onLoad(){
app.globalData.list.push({
id: 10
})
}
})
storage
Storage is not the main way of communication. storage is mainly for caching data, and can only store up to 10M data.
wx.setStorageSync('timestamp', Date.now())
wx.getStorageSync('timestamp')
wx.removeStorageSync('timestamp')