微信小程式中如何實作子向父傳參（頁面通訊）

這篇文章帶大家了解一下微信小程式中子頁面如何向父頁面傳遞參數，希望對大家有幫助！

微信小程式子頁面如何向父頁面傳遞參數

有時候我們在做微信小程式專案的時候，會遇到如下的情況：有一個清單頁，頁面有一個篩選條件，點擊之後跳轉頁面，進行條件的選擇，選擇完之後返回到清單頁，根據篩選的條件進行資料的查詢。一般這種情況比較多的時候，我們看到的都是透過彈框形式來進行篩選條件來處理的。那如果我們就想要跳轉頁面的這種互動方式，我們如何從子頁面把參數傳遞到父頁面呢？

【相關學習推薦：小程式開發教學】

#問題

• wx.navigateBack 無法攜帶參數，子頁面無法傳遞參數給父頁面。

子頁面操作父頁面資料

這個地方留意一下，我們是說的子頁面操作父頁面的資料。

在官方文件上有一個getCurrentPages的API(官網描述如下):

PageObject[] getCurrentPages()取得目前頁面堆疊。數組中第一個元素為首頁，最後一個元素為目前頁面。

• 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
• 不要在 App.onLaunch# 的時候呼叫 getCurrentPages()，此時 page 還沒產生。

透過getCurrentPages這個API，我們可以取得到頁面堆疊的數據，所以就可以取得到指定的頁面，在子頁面透過修改父頁面資料的方式，我們就可以實現子頁面向父頁面傳參的功能。

const pages = getCurrentPages();
const gotoPage = pages[pages.length - 1];

所以pages[pages.length - 1]就為目前頁面，父頁面就為pages[pages.length - 2]，依次類推，我們可以取得到其他的祖先頁面。

然後再使用setData 方法gotoPage.setData({xxx: ''})來修改設定父頁面的數據，從而達到子頁面向父頁面傳遞參數的目的。之後再透過 wx.navigateBack 進行頁面回傳即可。

其他解決方式

• 元件
• 彈框

如我們文章開頭提到，如果是需要從子頁面向父頁傳遞參數，那我們可以透過彈框的形式顯示內容，選擇完對應的資料之後，隱藏目前的彈框或元件。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是微信小程式中如何實作子向父傳參（頁面通訊）的詳細內容。更多資訊請關注PHP中文網其他相關文章！