> uniapp 提供了事件的監聽注冊以及觸發，注冊的事件都是 App 全局級別的，可以很方便的跨任意組件，頁面，nvue，vue 等。 [TOC] ### 相關注冊或觸發函數 > 參考：https://uniapp.dcloud.io/api/window/communication #### uni.$emit(eventName,OBJECT) > 觸發全局的自定事件。附加參數都會傳給監聽器回調。 #### uni.$on(eventName,callback) > 監聽全局的自定義事件。事件可以由 uni.$emit 觸發，回調函數會接收所有傳入事件觸發函數的額外參數。 #### uni.$once(eventName,callback) > 監聽全局的自定義事件。事件可以由 uni.$emit 觸發，但是只觸發一次，在第一次觸發之后移除監聽器。 #### uni.$off([eventName, callback]) > 移除全局自定義事件監聽器。 ### 場景案例 > 我們假設一個場景，進入app,是未登陸狀態，需要在我的頁面點擊登陸，進入登陸頁面進行登陸。登陸成功之后，返回到我的頁面，實時顯示登陸后的用戶信息。 #### 監聽事件 > 在“用戶中心“頁面 監聽事件。 > 因為事件監聽是全局的，所以使用`uni.$on`，需要使用`uni.$off`移除全局的事件監聽，避免重復監聽。 ~~~ <template> <view class="content"> <navigator url="/pages/login/index" hover-class="navigator-hover"> <button type="default">點我登錄</button> </navigator> <view v-if="usnerInfo !== null"> <view> 用戶token:{{usnerInfo.token}},用戶昵稱：{{usnerInfo.nickName}} </view> </view> </view> </template> <script> export default { data() { return { usnerInfo : null } }, onLoad() { // 監聽事件 console.log('on login....'); uni.$on('login',(uinfo)=>{ this.usnerInfo = uinfo; }) }, onUnload() { // 移除監聽事件 console.log('off login....'); uni.$off('login'); }, methods: { } } </script> ~~~ #### 觸發事件 > 進入登陸頁面，觸發事件 > 使用`uni.$emit`觸發事件后，對應的`uni.$on`就會監聽到事件觸發，在回調中去執行相關的邏輯。 ~~~ <template> <view> <button type="default" @click="login">登錄</button> </view> </template> <script> export default { data() { return {}; }, methods: { login() { // 假設用戶登錄成功，此時調用emit方法觸發監聽事件，刷新用戶登錄信息 uni.$emit('login', { token: 'user123456', nickName: 'wk123', }); } } } </script> ~~~ ### 更多使用場景 > 以上只是一個簡單的場景應用。而我們開發中會遇到很多頁面間通訊場景，如： * vue 與 nvue，nvue 與 vue 間的通訊 * tabbar 頁面之間的通訊 * 父頁面與多級子頁面間的通訊 > 基本上述場景均可以實現，本質上就是一個頁面通知另一個面我發生了變化，你需要處理一下。絕大部分頁面的通訊都可以使用`uni.$emit`、`uni.$on`、`uni.$once`、`uni.$off`四個事件完成。