uni-app上下級頁面資料雙向通訊

！win ！發表於2024-06-12
APP

前情

最近在做小程式專案，選用是當前比較火的uniapp技術棧，經常會遇到頁面間訊息傳遞的需求。

為什麼要這麼做？

uniapp頁面間資料通訊方式有很多：透過url傳參，狀態管理庫vuex/pinia，本地儲存，事件通道eventChannel，EventBus等。

這次的需求是在A麵點選一個按鈕跳轉到B頁面拾取一個資料選項再返回A頁面用B頁面拾取的資料做接下來邏輯處理，前面文章我有介紹透過EventBus來做這種資料傳遞，今天介紹透過uni.navigateTo的events引數和this.getOpenerEventChannel()來實現父子頁面雙向通訊。

實現程式碼

A頁面

<template>
  <view>
    <text>我是A頁面</text>
	  <button @click="gotoPageB">點我去B頁面</button>
  </view>
</template>

<script>
export default {
  methods: {
	  gotoPageB() {
		  uni.navigateTo({
				url: '/pages/pageB/pageB',
				events: {
					pageDataFormA:(event) => {
						this.handleCustomEvent(event);
					}
				},
				success: function(res) {
					// 透過eventChannel向被開啟頁面傳送資料
			    res.eventChannel.emit('dataFromB', { data: 'Hello from Component B' })
				}
			});
	  },
    handleCustomEvent(event) {
	    console.log(event.data); // 輸出: Hello from Component B
      // 處理事件的業務邏輯
      // ...
    }
  }
};
</script>

B頁面

<template>
  <view>
	  <text>我是B頁面</text>
    <button @tap="triggerEvent">點我</button>
  </view>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.eventChannel.emit('pageDataFormA', { data: 'Hello from Component B' })
      uni.navigateBack();
    },
    handPageBdata(event) {
	    console.log(event.data); // 輸出: Hello from Component A
      // 處理事件的業務邏輯
      // ...
    }
  },
  onLoad(){
	  this.eventChannel = this.getOpenerEventChannel();
	  this.eventChannel.on('dataFromB', (event) => {
		  this.handPageBdata(event);
	  });
  }
};
</script>

例項演示：

思考

其實這種方式是特意為這種父子級頁面做資料傳遞準備的，像eventBus的使用範圍更更廣，如果你也有這種父子級頁面資料通訊的要求，這種方式比EventBus更適合，你可以在專案中試一試，但是uni-app版本大於2.8.9的時候才可以使用，我寫這篇文章的時候uniapp版本已到了4.15，相容問題我感覺可以忽略，如實在擔心有相容那就還是用EventBus吧。

官方文擋的詳細介紹：uni.navigateTo(OBJECT) | uni-app官網 (dcloud.net.cn)

相關文章