uni-app中的頁面通訊$on與$emit

在頁面與頁面之間通訊時，很多人會直接選擇使用在navigato的時候直接拼接字符串來傳遞。可是當需要傳依個比較多數據的的對象的時候這個方式就不是很管用了，爲此uniapp給我們提供了頁面與頁面之間通訊的極爲簡便的方法。

 

比如我在下訂單頁面的時候需要用戶選擇一個地址去配送，因此我們需要點擊之後跳轉到選擇收貨地址頁面。而在選擇完了收貨地址以後需要關閉那個頁面返回該訂單頁面。因此在該訂單頁面我們需要開啓監聽用戶選擇地址的事件。注意在訂單頁面卸載的時候也要記得關閉該監聽。

 

下面爲訂單頁面的代碼：

onLoad() {
			
	//開啓監聽選擇收貨地址事件
	uni.$on('choosePath',(res)=>{
		this.path = res;
	})
},
		
//頁面卸載
	onUnload() {
		//關閉監聽選擇收貨地址事件
	uni.$off('choosePath',()=>{
		console.log('關閉監聽選擇收貨地址');
	})
},
	
methods: {
	openPathList(){
	    uni.navigateTo({
	        url: '../user-path-list/user-path-list?type=choose'
		});
	},
}	

 

下面是選擇地址的頁面：

onLoad(option) {
	if(option.type==='choose'){
		this.isChoose = true
	}
},

methods:{
    //選擇收穫地址
	choosePath(item){
		if(this.isChoose){
			//通知訂單頁面修改地址
			uni.$emit('choosePath',item)
			//關閉當前頁面
			uni.navigateBack({
				delta: 1
			});
		}
	}
}