uniapp頁面通訊講解之uni.$emit、uni.$on、uni.$once和uni.$off

更新時(shí)間：2022年09月07日 09:20:48 作者：佛佛?

uni-app?是一個(gè)使用vue.js開發(fā)所有前端應(yīng)用的框架,下面這篇文章主要給大家介紹了關(guān)于uniapp頁面通訊之uni.$emit、uni.$on、uni.$once和uni.$off的相關(guān)資料,需要的朋友可以參考下

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

注意事項(xiàng)

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

使用場景

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

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ā)事件后，對應(yīng)的 uni.$on 就會(huì)監(jiān)聽到事件觸發(fā)，在回調(diào)中去執(zhí)行相關(guān)的邏輯。
			uni.$on('login', (usnerinfo) => {
				this.usnerinfo = usnerinfo;
			})
		},
		onUnload() {
			// 移除監(jiān)聽事件  
			uni.$off('login');
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/a/a'
				})
			},
		}
	}
</script>

因?yàn)槭录O(jiān)聽是全局的，所以使用 uni.$on ，需要使用 uni.$off 移除全局的事件監(jiān)聽，避免重復(fù)監(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ā)事件后，對應(yīng)的 uni.$on 就會(huì)監(jiān)聽到事件觸發(fā)，在回調(diào)中去執(zhí)行相關(guān)的邏輯。

總結(jié)

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

您可能感興趣的文章: