uniapp頁面通訊講解之uni.$emit、uni.$on、uni.$once和uni.$off
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ā)事件后,對應(yīng)的 uni.$on 就會監(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>因為事件監(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 就會監(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Apply an AutoFormat to an Excel Spreadsheet
JS+HTML實現(xiàn)自定義上傳圖片按鈕并顯示圖片功能的方法分析

