問題來源
最近工作需要寫小程序頁面，其中有個頁面情況為：父頁面中包含了一個組件頁面，組件頁面中又包含了另外一個組件頁面。
需求為：點擊最后一個組件頁面中的一個view，需要顯示最外層父頁面中的一個彈出層，并且動態的展示值，這個值的來源就是最后一個組件頁面中的內容。
處理辦法
當時想到的就是使用全局變量，在 app.js 中定義好全局變量，點擊組件頁面時就修改全局變量的值，父頁面同樣使用全局變量的值，這樣一來就可以動態打開/關閉彈出層且傳遞值了。
下面先看看 app.js 中怎么定義的：
globalData: { openid: '', userInfo: null, _showPictureDetail: false, _pictureTime: '', _pictureAddress: '', //改變量用戶存放全局變量修改過程中的值傳遞, 傳遞對象 data: {} }在其他頁面就使用 getApp().globalData.參數名 = 值 的形式來改變參數值， 使用 getApp().globalData.參數名 的形式來獲取值。
這樣能正常賦值，但是由于都是在同一個界面展示，我需要更新值后，馬上得到最新的值。上面簡單的設置獲取就不起作用了。
那么，就需要監聽 globalData 中的屬性了。
首先是 app.js：
//app 全局屬性監聽 watch: function (method) { var obj = this.globalData; Object.defineProperty(obj, "data", { //這里的 data 對應 上面 globalData 中的 data configurable: true, enumerable: true, set: function (value) { //動態賦值，傳遞對象，為 globalData 中對應變量賦值 this._showPictureDetail = value.showPictureDetail; this._pictureTime = value.pictureTime; this._pictureAddress = value.pictureAddress; method(value); }, get: function () { //獲取全局變量值，直接返回全部 return this.globalData; } }) },接下來就是在組件頁面事件中動態賦值：
//圖片拍攝詳情查看 viewPictureDetailInfo: function (e) { // 修改 app 全局屬性值， 由于 globalData.data 是個對象，因為涉及到修改多個參數，所以需要傳遞對象 app.globalData.data = { '_showPictureDetail': true, '_pictureTime': e.currentTarget.dataset.phototime, '_pictureAddress': e.currentTarget.dataset.address } },最后就是在最外層父頁面添加 app.js 監聽回調，動態修改變量值，以達到動態打開/關閉彈出層和展示內容了：
// 首先需要在父頁面 onLoad() 方法中添加監聽以及指定監聽回調方法// 設置 App 監聽回調// 如果其他頁面修改了 app.js 中的 showPictureDetail 值, 就會觸發回調getApp().watch(self.watchBack)//定義監聽回調方法//app 監聽回調方法 watchBack: function (value) { //這里的value 就是 app.js 中 watch 方法中的 set, 返回整個 globalData this.setData({ showPictureDetail: value._showPictureDetail, pictureTime: value._pictureTime, pictureAddress: value._pictureAddress }); },這樣，在父頁面中使用 showPictureDetail..這幾個變量就可以動態展示了。
PS：我這邊的業務需求涉及到多個變量的監聽，如果你只有一個變量的監聽，那么只需要修改 app.js 中 watch 方法的 Object.defineProperty 內容由對象傳遞變為單個值傳遞即可。在更新值和獲取值時傳遞就是一個值，而不是對象。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答
