小程序 - 实现数据通信的方式

1. properties

父组件向子组件通信，类似于 vue 的 props。

父组件向子组件传参：

子组件接收参数：

 

 2.triggerEvent

子组件向父组件通信，类似于 vue 的 this.$emit

子组件触发自定义事件：

 

 父组件绑定自定义事件：

 

 3.selectComponent()

使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象，类似于Vue的ref

 

 4.selectOwnerComponent()

选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象，类似于Vue的$parent

 

 

 

 5.getCurrentpages()

getCurrentPages() 获取当前页面栈，数组中第一个元素为首页，最后一个元素为当前页面。

元素为一个对象，里面存放着页面的信息，包括route（页面路径）、options（onLoad拿到的参数）、method、data等。

也可以通过 setData 方法或页面中的方法修改页面的数据。

 

6.globalData

全局数据，所有页面和组件都能够访问和修改

 

7.本地存储

同步方法：

异步方法：

 

8.eventBus

将eventBus挂载到全局，通过发布订阅模式注册事件和触发事件进行通信

let Dep = {
  eventList: {},
  on(key, fn) {
    if (!this.eventList[key]) {
      this.eventList[key] = []
    }
    this.eventList[key].push(fn)
  },
  emit() {
    let key = Array.prototype.shift.call(arguments)
    let events = this.eventList[key]
    if (!events || events.length === 0) {
      return false
    }
    events.forEach(fn => fn.apply(null, arguments))
  },
  off(key, fn) {
    let events = this.eventList[key]
    if (!events || events.length === 0) {
      return false
    }
    events.forEach(item => {
      if (item === fn) {
        let idx = events.indexOf(fn)
        events.splice(idx, 1)
        return
      }
    })
  }
}

View Code

 

如果还有其他的通信方式请告诉我~