preface

Data communication is an essential link in the development, but also we must master the knowledge. The more you know about data communication methods, the better your business will be.

I would like to categorize these communication methods as follows:

• Component communication
• Global communication
• The page

Component communication

properties

The parent component communicates to the child component, as functions of the Vue.

Parent component to child component:

<my-component list="{{list}}"></my-component>
Copy the code

Child components receive data:

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

triggerEvent

The child component communicates to the parent component in the same way as Vue’s $emit function

Child component fires custom event:

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

The parent component receives custom events:

<my-component list="{{list}}" bind:customEvent="customEvent"></my-component>
Copy the code

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

selectComponent

Use a selector to select the component instance node and return the first matching component instance object, similar to Vue’s ref

<my-component id="mycomponent" list="{{list}}"></my-component>
Copy the code

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

selectOwnerComponent

Selects the component instance of the current component node (that is, the reference of the component) and returns its component instance object, similar to Vue’s $parent

Component({
  attached(){
    let parent = this.selectOwnerComponent()
    console.log(parent)
  }
})
Copy the code

Global communication

globalData

Attaching data to app.js is a common practice in development. With getApp(), we can access the app instance from any page.

app.js

App({
  globalData: {list: []}})Copy the code

page1.js

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

page2.js

const app = getApp()
Page({
  onLoad(){
    console.log(app.globalData.list) // [{id:10}]}})Copy the code

storage

Storage is not used as the primary means of communication. Storage is mainly used to cache data and can store a maximum of 10 MB of data. Therefore, we should make proper use of storage

wx.setStorageSync('timestamp'.Date.now())
wx.getStorageSync('timestamp')
wx.removeStorageSync('timestamp')
Copy the code

eventBus

The publish-subscribe mode registers events and triggers events to communicate

Simple implementation

class EventBus{
  constructor() {this.task = {}
  }

  on(name, cb){
    if(!this.task[name]){
      this.task[name] = []
    }
    typeof cb === 'function' && this.task[name].push(cb) } emit(name, ... arg){let taskQueen = this.task[name]
    if(taskQueen && taskQueen.length > 0){
      taskQueen.forEach(cb= >{ cb(... arg) }) } } off(name, cb){let taskQueen = this.task[name]
    if(taskQueen && taskQueen.length > 0) {letindex = taskQueen.indexOf(cb) index ! =- 1 && taskQueen.splice(index, 1)
    }
  }

  once(name, cb){
    function callback(. arg){
      this.off(name, cb) cb(... arg) }typeof cb === 'function' && this.on(name, callback)
  }
}

export default EventBus
Copy the code

use

app.js

import EventBus from '/util/EventBus'

wx.$bus = new EventBus()
Copy the code

page1.js

Page({
  onLoad(){
    wx.$bus.on('add'.this.addHandler)
  },
  addHandler(a, b){
    console.log(a+b)
  }
})
Copy the code

page2.js

Page({
  onLoad(){
    wx.$bus.emit('add'.10.20)}})Copy the code

The page

getCurrentPages

GetCurrentPages () gets the current page stack, with the first element being the home page and the last element being the current page

The element is an object that contains information about the page, including route, options, method, and data

Page({
  onLoad(){
    let pages = getCurrentPages()
    let lastPage = pages[pages.length2 -]
    lastPage.setData({
      list: []})}})Copy the code

Write in the last

If you have other means of communication, welcome to exchange ~