大家好，我是skinner，這是我的第7篇分享
序
本文論述的是子或孫向父傳遞數據的情況，自下而上
相信大家平時在小程序開發中肯定遇到過頁面或者組件之間的數據通信問題，那小程序數據通信都有哪些方式呢？如何選擇合適的通信方式呢？這就是本文要討論的重點。
關係劃分
在討論都有哪些數據通信方式之前，我們先來定義一下，小程序頁面、組件之間都有哪些關係。我總結了一下，大概分爲以下3類：
- 父子關係
- 兄弟關係
- 爺孫關係
不同的關係裏面，不同角色之間有可能是頁面，也有可能是組件，接下來我們就一個個來揭示如何進行數據通信。
父子關係
父子關係一般主要就是兩種情況：
- 父爲頁面，子爲組件
- 父爲組件，子爲組件
這種關係可能是頻率出現最高的了，畢竟大部分小程序頁面都是以小而美爲主，可能沒有分的太細，碰到這種情況，我們可以通過在父頁面監聽子組件觸發的事件來完成數據通信。
方法一
<!-- 當自定義組件觸發“myevent”事件時，調用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發“myevent”事件</button>
Component({
methods: {
onTap() {
const myEventDetail = {} // detail對象，提供給事件監聽函數
const myEventOption = {} // 觸發事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})
複製代碼
兄弟關係
兄弟關係同樣分爲兩種情況：
- 兄弟間都是頁面
- 兄弟間都是組件
兄弟間都是頁面
這種關係指的就是，同層次間的頁面，簡單理解其實就是頁面之間的跳轉，那從頁面A跳到頁面B，頁面B如何修改頁面A的數據呢？
方法二
頁面生命週期裏面都有onShow``onHide方法，通過localStorage或者globalData作爲數據中轉，進入到不同頁面時，在前一個頁面onShow裏面取出數據，在後一個頁面onShow裏面存儲數據，具體做法如下：
<!--app.js-->
App({
globalData: { count: 0 },
});
<!--頁面A-->
onShow(){
let countValue = wx.getStorageSync('count');
<!--globalData的方式-->
let countValue = getApp().globalData.count;
<!---->
if(countValue){
this.setData({
count:countValue
})
}
<!--globalData的方式 清除數據-->
getApp().globalData.count = null
<!---->
}
onHide(){
wx.removeStorageSync('count')
}
<!--頁面B-->
onShow(){
<!--globalData的方式-->
getApp().globalData.count = 1
<!---->
wx.setStorageSync('count',1);
}
複製代碼
爺孫關係
爺孫關係算是數據通信中最複雜的了，因爲不是直系傳遞，若是通過方法一來監聽，那就需要通過多級傳遞事件了，如果節點比較深，可想而知代碼是得多難理解且難以維護。
我們可以通過全局創建一個事件總棧EventBus，利用這個EventBus來訂閱發佈事件，也就是我們經常使用的發佈訂閱模式，那在小程序裏面如何實現呢？
方法三
<!--第一步：實現一個事件總棧類-->
class EventBus {
constructor() {
this.bus = {};
}
// on 訂閱
on(type, fun) {
if (typeof fun !== 'function') {
console.error('fun is not a function');
return;
}
(this.bus[type] = this.bus[type] || []).push(fun);
}
// emit 觸發
emit(type, ...param) {
let cache = this.bus[type];
if (!cache) return;
for (let event of cache) {
event.call(this, ...param);
}
}
// off 釋放
off(type, fun) {
let events = this.bus[type];
if (!events) return;
let i = 0,
n = events.length;
for (i; i < n; i++) {
let event = events[i];
if (fun === event) {
events.splice(i, 1);
break;
}
}
}
}
module.exports = EventBus;
<!--第二步：在app.js文件中引入-->
import EventBus from './common/event-bus/index.js';
App({
eventBus: new EventBus(),
});
<!--第三步：在父頁面或者父組件中監聽某個事件-->
onLoad: function(options) {
app.eventBus.on('add-count', this.addCount);
}
onUnload: function(options) {
app.eventBus.off('add-count', this.addCount);
}
<!--第四步：在子組件裏面觸發事件-->
methods: {
addCount() {
app.eventBus.emit('add-count');
}
}
複製代碼
除此之外，還有一種方式，我們可以在每個頁面onLoad週期裏面將該頁面的pageModel對象緩存起來，之後在孫輩組件裏面拿到祖孫的頁面對象，從而觸發祖孫頁面對象對應的方法。
方法四
<!--第一步：實現一個pageModel，用來緩存頁面對象-->
class PageModel {
constructor() {
this.pageCache = {};
}
add(page) {
let pagePath = this._getPageModelPath(page);
this.pageCache[pagePath] = page;
}
get(path) {
return this.pageCache[path];
}
delete(page) {
delete this.pageCache[this._getPageModelPath(page)];
}
<!--這一段代碼是關鍵，存儲的是__route__屬性-->
_getPageModelPath(page) {
return page.__route__;
}
}
export default PageModel ;
<!--第二步：app.js中引入-->
import PageModel from './common/page-model/index.js';
App({
pageModel: new PageModel(),
});
<!--第三步：頁面onLoad週期裏緩存頁面-->
onLoad: function(options) {
app.pageModel.add(this);
}
<!--第四步：子孫獲取祖輩方法-->
methods: {
addCount() {
app.pageModel.get('pages/communicate/index').addCount();
}
}
複製代碼
總結
首先，方法三和方法四可以運用在所有情況，不過得視情況而使用。如果頁面層級不深，簡單的事件監聽（方法一）即可，沒必要再創建一個事件總棧，因爲如果頁面數量一多，各種監聽，通過EventBus容易重名，造成一些不可知情況。另外，方法四也有一定風險，萬一之後微信基礎庫不把頁面對象存儲在__route__裏面了，我們的方式也就不生效了。
所有示例代碼都可以通過以下兩種方式查看，如果喜歡我的文章，歡迎點👍鼓勵哦，謝謝！
作者：skinner
鏈接：https://juejin.im/post/5cb2f572e51d456e6154b402