大家好，我是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__裡面了，我們的方式也就不生效了。
所有示例程式碼都可以通過以下兩種方式檢視，如果喜歡我的文章，歡迎點?鼓勵哦，謝謝！