這篇文章主要介紹怎么用Vue編寫抽象組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了裕安免費(fèi)建站歡迎大家使用！

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

看過 Vue 源碼的同學(xué)可以知道，、、等組件

組件的實(shí)現(xiàn)是一個(gè)對(duì)象，注意它有一個(gè)屬性 abstract 為 true，表明是它一個(gè)抽象組件。

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

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

核心代碼如下：

使用

  測(cè)試

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

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

使用

  測(cè)試

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

以上是“怎么用Vue編寫抽象組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！