摘要:看過源碼的同學可以知道,等組件組件的實現是一個對象,注意它有一個屬性為,表明是它一個抽象組件。我們可以進一步對組件進行優化。
看過 Vue 源碼的同學可以知道,
組件的實現是一個對象,注意它有一個屬性 abstract 為 true,表明是它一個抽象組件。
Vue 的文檔沒有提這個概念,在抽象組件的生命周期過程中,我們可以對包裹的子組件監聽的事件進行攔截,也可以對子組件進行 Dom 操作,從而可以對我們需要的功能進行封裝,而不需要關心子組件的具體實現。
下面實現一個 debounce 組件,對子組件的 click 事件進行攔截
核心代碼如下:
使用
可以看到,按鈕的 click 事件已經加上了去抖(debounce)操作。
我們可以進一步對 debounce 組件進行優化。
使用
我們同樣可以為輸入框的 input 事件進行 debouce 操作
本文作者: Shellming
本文鏈接: https://shellming.com/2019/05/06/vue-absract-components/
版權聲明: 本博客所有文章除特別聲明外,均采用 CC BY-NC-SA 3.0 許可協議。轉載請注明出處!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104134.html
摘要:由于是需要兼容的后臺系統,該項目并不能使用到等技術,因此我在上的經驗大都是使用原生的編寫的,可以看見一個組件分為兩部分視圖部分,和數據部分。 在公司里幫項目組里開發后臺系統的前端項目也有一段時間了。 vue這種數據驅動,組件化的框架和react很像,從一開始的快速上手基本的開發,到后來開始自定義組件,對element UI的組件二次封裝以滿足項目需求,期間也是踩了不少坑。由于將來很長一...
摘要:趁熱打鐵,梳理下這段時間學習和使用以后,給自己最大的收獲開發思維轉變。事件驅動先說說以前前端發開的思維方式。分開設計頁面結構和數據結構,然后將與數據結構做關聯,之后所有的事件觸發的都只是數據的變化,會自動根據數據的變化做相應改變。 加班加點連續一個多月,總算是快把一個開始時心里完全沒有底的項目收工了。新項目基于舊系統開發,在保留原有老架構jade + knockout + jquery...
摘要:所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中,需要用實例的方法清除可當你有多個時,就需要重復性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積,傳輸速度更快。本文目錄 接口模塊處理 Vue組件動態注冊 頁面性能調試:Hiper Vue高階組件封裝 性能優化:eventBus封裝 webpack插件:真香 本文項目基于Vue-Cli3,想知...
摘要:觸發事件可以攜帶數據,這些數據被用于傳遞給綁定了事件的其它組件的回調函數上,進而被傳遞給其它組件。父組件可以在回調函數里做任何事情,頗有靈活性。一般情況下,父組件會在回調函數中更新自己的狀態數據。 上一篇博文梳理了vue的數據驅動和響應式相關的特性,這一篇博文就來梳理vue的一個很重要的特性,組件化。自定義組件之于vue,其意義不亞于函數之于C,java之類的編程語言。函數是計算機科學...
摘要:手牽手搭建前端組件庫本文梳理如何搭建和構建前端組件庫了解幾個問題為何需要組件化大部分項目起源都是源于業務方的各種各樣的奇葩需求。作者是否私有,需要修改為才能發布到開源協議參考配置添加文件發布時,只有編譯后的目錄才需要被發布。 手牽手搭建前端組件庫 本文梳理如何搭建和構建前端組件庫. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...
閱讀 4428·2021-09-09 09:33
閱讀 2386·2019-08-29 17:15
閱讀 2374·2019-08-29 16:21
閱讀 981·2019-08-29 15:06
閱讀 2620·2019-08-29 13:25
閱讀 582·2019-08-29 11:32
閱讀 3256·2019-08-26 11:55
閱讀 2594·2019-08-23 18:24