事件總線vueEvent

一個組件結束后要更新另一個組件數據,但是另一個組件和這個組件沒有上下級關系


在 Vue 中,非父子組件之間進行通信通常需要使用事件總線或者其他的全局事件管理器。在你的代碼片段中,vueEvent 似乎是一個事件總線對象,通過 emit 方法觸發了名為 'updateData' 的事件,并使用 on 方法監聽了該事件。這種模式在 Vue 應用中是常見的,它允許不同組件之間進行解耦的通信。

vueEvent.all.delete('updateData'),看起來是在組件卸載前刪除了 'updateData' 事件的監聽器。這么做的原因可能是為了確保在組件銷毀時移除不再需要的事件監聽器,以防止內存泄漏和不必要的事件處理。

通常,為了避免內存泄漏和不必要的資源占用,你會在組件銷毀前做一些清理工作,包括取消訂閱事件、清除定時器等。在這個例子中,vueEvent.all.delete('updateData') 語句的目的就是從事件總線中移除對 'updateData' 事件的監聽器。

//一個組件:import { getCurrentInstance, onBeforeUnmount } from 'vue';const vueEvent = getCurrentInstance()?.appContext.config.globalProperties.vueEvent;vueEvent.emit('updateData');//另一個組件:const vueEvent = getCurrentInstance()?.appContext.config.globalProperties.vueEvent;vueEvent.on('updateData', reload);//此處是和onMounted同級onBeforeUnmount(() => {vueEvent.all.delete('updateData');});

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/23596.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/23596.shtml
英文地址,請注明出處:http://en.pswp.cn/web/23596.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

c++ 里函數選擇的優先級:普通函數、模板函數、萬能引用,編譯器選擇哪個執行呢?

看大師寫的代碼時,除了在類里定義了 copy 構造函數,移動構造函數,還定義了對形參采取萬能引用的構造函數,因此有個疑問,這時候的構造函數優先級是什么樣的呢?簡化邏輯測試一下,如下圖&#xff0…

如何實現JavaScript中的寄生組合式繼承?

在JavaScript中,寄生組合式繼承是一種繼承機制,它結合了寄生式繼承和組合繼承的特點。其核心思想是通過構造函數來繼承屬性,同時通過原型鏈來繼承方法。以下是實現寄生組合式繼承的基本步驟: 首先定義一個輔助函數 inheritProtot…

Pygame:新手指南與入門教程

在游戲開發領域,pygame 是一個廣受歡迎的 Python 庫,它提供了開發二維游戲的豐富工具和方法。這個庫讓開發者可以較少地關注底層圖形處理細節,更多地專注于游戲邏輯和玩法的實現。本文將詳細介紹 pygame,包括其安裝過程、基本概念、主要功能和一個簡單游戲的開發流程。 一…

【Vue】路由的封裝抽離

問題:所有的路由配置都在main.js中合適嗎? 目標:將路由模塊抽離出來。 好處:拆分模塊,利于維護 路徑簡寫: 腳手架環境下 指代src目錄,可以用于快速引入組件 完整代碼 router/index.js // 但…

探索貸款交易平臺的技術架構與創新應用

隨著金融科技的快速發展,貸款交易平臺作為金融行業的重要組成部分,正扮演著越來越重要的角色。本文將深入探討貸款交易平臺的技術架構和創新應用,從前端設計、后端系統、安全保障和智能化服務等方面進行全面解析,幫助讀者更好地了…

【Python報錯】已解決AttributeError: list object has no attribute ’shape‘ ( Solved )

解決Python報錯:AttributeError: ‘list’ object has no attribute ‘shape’ (Solved) 在Python中,AttributeError表明你試圖訪問的對象沒有你請求的屬性或方法。如果你遇到了AttributeError: list object has no attribute shape的錯誤,這…

為什么要用Git

1. Git是什么 1.1. 概述 Git是分布式版本控制系統,與SVN類似的集中化版本控制系統相比,集中化版本控制系統如果中央服務器宕機則會影響數據和協同開發。 Git是分布式的版本控制系統,客戶端不只是提取最新版本的快照,而且將整個…

【Java畢業設計】基于Java的特色美食推薦網站的設計與實現

文章目錄 摘 要ABSTRACT目 錄1 概述1.1 研究背景及意義1.2 國內外研究現狀1.3 擬研究內容1.4 系統開發技術1.4.1 Java編程語言1.4.2 SpringBoot框架1.4.3 MySQL數據庫1.4.4 B/S結構1.4.5 MVC模式 2 系統需求分析2.1 可行性分析2.2 任務概述2.3 功能性需求3.2.2 數據庫邏輯結構設…

全面解析如何租用免備案海外服務器

租用免備案海外服務器是許多企業和個人在全球范圍內開展業務或訪問國際互聯網資源時選擇的一種方式。這種服務具有無需經過中國互聯網備案流程的優勢,能夠快速部署并使用。下面將詳細介紹免備案海外服務器租用的相關信息,rak部落為您整理發布。 1. **國外…

外匯天眼:FSCS確認TenetConnect Services Ltd已任命管理人

2024年6月5日,Tenet Group Ltd的董事們任命了Interpath Ltd的Ed Boyle、Howard Smith和Rob Spence為聯合管理人。Ed Boyle和Rob Spence也被任命為其子公司Tenet Ltd、TenetConnect Ltd和TenetConnect Services Ltd的聯合管理人。Tenet Mortgage Services Ltd和Tenet…

【計算機視覺(8)】

基于Python的OpenCV基礎入門——圖像直方圖 直方圖圖像直方圖 圖像直方圖代碼以及實現效果 直方圖 直方圖是一種用于描述圖像亮度分布的統計工具。它將圖像的像素亮度值按照不同的亮度等級進行計數,并以直方圖的形式呈現出來。圖像直方圖可以顯示圖像中每個亮度級別…

點擊式的excel電子表格查找修改功能,比xlookup和vlookup簡單,多列關聯查詢速度更快

經過實際測試,excel的xlookup確實非常簡單,有部分功能也非常快。但是有的人不會公式,或者不喜歡用公式,或者沒有excel2021以上的版本。而且xlookup確實也有些還不是很完美的地方,比如對多列關聯查詢很慢。所以我們還是…

MVC前端怎么寫:深入解析與實戰指南

MVC前端怎么寫:深入解析與實戰指南 在Web開發領域,MVC(Model-View-Controller)是一種廣泛使用的架構模式,它將應用程序的數據、界面和控制邏輯分離,使得代碼更加清晰、易于維護。本文將詳細探討MVC前端如何…

selenium非全新的方式同時啟動多個瀏覽器又互不影響的一種實現方法,歡迎討論!

最近在做模擬瀏覽器批量定時自動點擊實現批量操作功能,主要使用selenium,但是發現selenium直接調用本地瀏覽器,啟動的是一個全新的(與手動打開的不一致),網站可以檢測到,每次都要雙重驗證(密碼登…

Windows系統中不同Java版本共存

Windows系統中不同Java版本共存的方法 在Windows系統中,有時我們需要同時運行多個Java應用,而這些應用可能依賴于不同版本的Java Development Kit (JDK) 或 Java Runtime Environment (JRE)。為了實現這種需求,我們需要在Windows中配置多個J…

我應該如何使用 Python 的 NLTK 庫進行詞頻統計?

使用Python的NLTK(Natural Language Toolkit)庫進行詞頻統計,你可以遵循以下步驟: 安裝NLTK庫: 如果你還沒有安裝NLTK,可以通過pip安裝: pip install nltk導入必要的模塊: 在Python腳…

電商APP用戶體驗提升技巧:一個實戰案例

隨著網絡和移動技術的快速發展,加上全球疫情的影響,電子商務應用程序改變了人們的購物方式,積累了大量的用戶群體。如今,一個成功的電子商務應用程序,除了網站用戶界面的美,電子商務用戶體驗的設計&#xf…

深度學習筆記: 最詳盡LinkedIn Feed 排名系統設計

歡迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有問題可以隨時與我交流, 謝謝大家! LinkedIn Feed 排名 1. 問題陳述 設計一個個性化的LinkedIn Feed,以最大化用戶的長期參與度…

Typecho:簡約而強大的開源PHP博客平臺

Typecho:讓博客寫作回歸本質- 精選真開源,釋放新價值。 概覽 Typecho是一個開源的PHP博客平臺,以其簡潔的界面和強大的功能,為博客作者提供了一個高效、易于管理的寫作環境。它是一個輕量級、高性能的解決方案,適用于…

【TensorFlow深度學習】Adam優化器的工作原理與配置細節

Adam優化器的工作原理與配置細節 Adam優化器的工作原理與配置細節:深度學習優化藝術的精粹Adam優化器的原理探秘配置細節:細調Adam的超參數實戰演練:使用Keras配置Adam優化器總結與進階 Adam優化器的工作原理與配置細節:深度學習優…