用 Vue 編寫抽象組件

voyagelab 發(fā)布于2019-08-23 17:18 / 3485人閱讀

摘要：看過源碼的同學(xué)可以知道，等組件組件的實(shí)現(xiàn)是一個(gè)對象，注意它有一個(gè)屬性為，表明是它一個(gè)抽象組件。我們可以進(jìn)一步對組件進(jìn)行優(yōu)化。

看過 Vue 源碼的同學(xué)可以知道，、、等組件
組件的實(shí)現(xiàn)是一個(gè)對象，注意它有一個(gè)屬性 abstract 為 true，表明是它一個(gè)抽象組件。

Vue 的文檔沒有提這個(gè)概念，在抽象組件的生命周期過程中，我們可以對包裹的子組件監(jiān)聽的事件進(jìn)行攔截，也可以對子組件進(jìn)行 Dom 操作，從而可以對我們需要的功能進(jìn)行封裝，而不需要關(guān)心子組件的具體實(shí)現(xiàn)。

下面實(shí)現(xiàn)一個(gè) debounce 組件，對子組件的 click 事件進(jìn)行攔截

核心代碼如下：

使用

可以看到，按鈕的 click 事件已經(jīng)加上了去抖(debounce)操作。

我們可以進(jìn)一步對 debounce 組件進(jìn)行優(yōu)化。

使用

我們同樣可以為輸入框的 input 事件進(jìn)行 debouce 操作

本文作者： Shellming
本文鏈接： https://shellming.com/2019/05/06/vue-absract-components/
版權(quán)聲明： 本博客所有文章除特別聲明外，均采用 CC BY-NC-SA 3.0 許可協(xié)議。轉(zhuǎn)載請注明出處！

GPU云服務(wù)器云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104134.html

相關(guān)文章

vue總結(jié)系列--數(shù)據(jù)驅(qū)動和響應(yīng)式

摘要：由于是需要兼容的后臺系統(tǒng)，該項(xiàng)目并不能使用到等技術(shù)，因此我在上的經(jīng)驗(yàn)大都是使用原生的編寫的，可以看見一個(gè)組件分為兩部分視圖部分，和數(shù)據(jù)部分。在公司里幫項(xiàng)目組里開發(fā)后臺系統(tǒng)的前端項(xiàng)目也有一段時(shí)間了。 vue這種數(shù)據(jù)驅(qū)動，組件化的框架和react很像，從一開始的快速上手基本的開發(fā)，到后來開始自定義組件，對element UI的組件二次封裝以滿足項(xiàng)目需求，期間也是踩了不少坑。由于將來很長一...

AbnerMing 2019-08-22 18:26 評論0 收藏0
前端開發(fā)思維轉(zhuǎn)變——從事件驅(qū)動到數(shù)據(jù)驅(qū)動

摘要：趁熱打鐵，梳理下這段時(shí)間學(xué)習(xí)和使用以后，給自己最大的收獲開發(fā)思維轉(zhuǎn)變。事件驅(qū)動先說說以前前端發(fā)開的思維方式。分開設(shè)計(jì)頁面結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)，然后將與數(shù)據(jù)結(jié)構(gòu)做關(guān)聯(lián)，之后所有的事件觸發(fā)的都只是數(shù)據(jù)的變化，會自動根據(jù)數(shù)據(jù)的變化做相應(yīng)改變。加班加點(diǎn)連續(xù)一個(gè)多月，總算是快把一個(gè)開始時(shí)心里完全沒有底的項(xiàng)目收工了。新項(xiàng)目基于舊系統(tǒng)開發(fā)，在保留原有老架構(gòu)jade + knockout + jquery...

learning 2019-08-20 18:03 評論0 收藏0
「Vue實(shí)踐」武裝你的前端項(xiàng)目

摘要：所有的高階抽象組件是通過定義選項(xiàng)來聲明的。所以一般在生命周期或者中，需要用實(shí)例的方法清除可當(dāng)你有多個(gè)時(shí)，就需要重復(fù)性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄接口模塊處理 Vue組件動態(tài)注冊頁面性能調(diào)試：Hiper Vue高階組件封裝性能優(yōu)化：eventBus封裝 webpack插件：真香本文項(xiàng)目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 評論0 收藏0
vue總結(jié)系列--組件化

摘要：觸發(fā)事件可以攜帶數(shù)據(jù)，這些數(shù)據(jù)被用于傳遞給綁定了事件的其它組件的回調(diào)函數(shù)上，進(jìn)而被傳遞給其它組件。父組件可以在回調(diào)函數(shù)里做任何事情，頗有靈活性。一般情況下，父組件會在回調(diào)函數(shù)中更新自己的狀態(tài)數(shù)據(jù)。上一篇博文梳理了vue的數(shù)據(jù)驅(qū)動和響應(yīng)式相關(guān)的特性，這一篇博文就來梳理vue的一個(gè)很重要的特性，組件化。自定義組件之于vue，其意義不亞于函數(shù)之于C，java之類的編程語言。函數(shù)是計(jì)算機(jī)科學(xué)...

cuieney 2019-08-22 18:28 評論0 收藏0
【手牽手】搭建前端組件庫（一）

摘要：手牽手搭建前端組件庫本文梳理如何搭建和構(gòu)建前端組件庫了解幾個(gè)問題為何需要組件化大部分項(xiàng)目起源都是源于業(yè)務(wù)方的各種各樣的奇葩需求。作者是否私有，需要修改為才能發(fā)布到開源協(xié)議參考配置添加文件發(fā)布時(shí)，只有編譯后的目錄才需要被發(fā)布。手牽手搭建前端組件庫本文梳理如何搭建和構(gòu)建前端組件庫. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

waltr 2019-08-23 15:30 評論0 收藏0