uni-app實現(xiàn)頁面通信EventChannel的操作方法

更新時間：2024年05月31日 10:58:04 作者：幸福了，然后呢

使用了EventBus的方法實現(xiàn)不同頁面組件之間的一個通信,在uni-app中,我們也可以使用uni-app API,uni.navigateTo來實現(xiàn)頁面間的通信,這篇文章主要介紹了uni-app實現(xiàn)頁面通信EventChannel的操作方法,需要的朋友可以參考下

uni-app實現(xiàn)頁面通信EventChannel

之前使用了EventBus的方法實現(xiàn)不同頁面組件之間的一個通信，在uni-app中，我們也可以使用uni-app API —— uni.navigateTo來實現(xiàn)頁面間的通信。注：2.8.9+ 支持頁面間事件通信通道。

1. 向被打開頁面?zhèn)魉蛿?shù)據

// index.vue
<script setup>
	uni.navigateTo({
		url: '/pages/tender/detail', // 跳轉詳情頁面
	    success:function(res){
	      // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據
	      res.eventChannel.emit('toDetailEmits', { data: 'index to detail' })
	    }
	});
</script>

// detail.vue
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance} from 'vue';
const instance = getCurrentInstance().proxy
<script setup>
	onLoad(()=>{
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('toDetailEmits',(data)=>{
		  console.log(data,'data') // 輸出結果如下
		})
	})
</script>

2. 如果需要獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據

// index.vue
<script setup>
	uni.navigateTo({
		url: '/pages/tender/detail', // 跳轉詳情頁面
	    events:{
	      // 為指定事件添加一個監(jiān)聽器，獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據
	      updataEmits:function(data){
	        console.log(data,'data index')  // 輸出結果如下
	        // 可以在當前頁做一些操作....
	      }
	    },
	    success:function(res){
	      // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據
	      res.eventChannel.emit('toDetailEmits', { data: 'index to detail' })
	    }
	});
</script>

// detail.vue
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance} from 'vue';
const instance = getCurrentInstance().proxy
<script setup>
	// 如點擊某一按鈕
	const cancle = () => {
		const eventChannel = instance.getOpenerEventChannel();
	    eventChannel.emit('updataEmits',{data:'detail to index'})
	    uni.navigateBack()
	}
	onLoad(()=>{
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('toDetailEmits',(data)=>{
		  console.log(data,'data') 
		})
	})
</script>