uni.$emit(eventName,OBJECT)	觸發(fā)全局的自定義事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。
uni.$on(eventName,callback)	監(jiān)聽全局的自定義事件。事件可以由 uni.$emit 觸發(fā)，回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。
uni.$once(eventName,callback)	監(jiān)聽全局的自定義事件。事件可以由 uni.$emit 觸發(fā)，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。
uni.$off([eventName, callback])	移除全局自定義事件監(jiān)聽器。

注意事項

uni.$emit、 uni.$on 、 uni.$once 、uni.$off 觸發(fā)的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等
使用時，注意及時銷毀事件監(jiān)聽，比如，頁面 onLoad 里邊 uni.$on 注冊監(jiān)聽，onUnload 里邊 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 監(jiān)聽

使用場景

進入app,是未登陸狀態(tài)，需要在我的頁面點擊登陸，進入登陸頁面進行登陸。登陸成功之后，返回到我的頁面，實時顯示登陸后的用戶信息。

1、在我的頁面，監(jiān)聽事件

<template>
	<view class="content">
		<text v-if="usnerinfo">{{usnerinfo.userName}}</text>
		<button v-else @click="toLogin">去登錄</button>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				usnerinfo: null
			}
		},
		// 我的頁面  
		onLoad() {
			// 監(jiān)聽事件,使用 uni.$emit 觸發(fā)事件后，對應的 uni.$on 就會監(jiān)聽到事件觸發(fā)，在回調(diào)中去執(zhí)行相關的邏輯。
			uni.$on('login', (usnerinfo) => {
				this.usnerinfo = usnerinfo;
			})
		},
		onUnload() {
			// 移除監(jiān)聽事件  
			uni.$off('login');
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/a/a'
				})
			},
		}
	}
</script>

因為事件監(jiān)聽是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件監(jiān)聽，避免重復監(jiān)聽。

2、在登錄頁，觸發(fā)事件

<template>
	<view class="content">
		<view class="data" @click="doLogin">觸發(fā)方法，獲取用戶信息</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				usnerinfo: null
			}
		},
		// 我的頁面  
		onLoad() {},
		methods: {
			doLogin() {
				// 登陸頁面  
				uni.$emit('login', {
					userName: 'lzzzzzzzzzzzzzzzzzzzzz',
					login: true
				});
				uni.navigateBack({})
			}
		}
	}
</script>

使用 uni.$emit 觸發(fā)事件后，對應的 uni.$on 就會監(jiān)聽到事件觸發(fā)，在回調(diào)中去執(zhí)行相關的邏輯。

總結

到此這篇關于uniapp頁面通訊講解之uni.$emit、uni.$on、uni.$once和uni.$off的文章就介紹到這了,更多相關uniapp uni.$emit uni.$on uni.$once uni.$off內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: