您好,登錄后才能下訂單哦!
這篇文章主要介紹怎么用Vue編寫抽象組件,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
看過 Vue 源碼的同學可以知道,<keep-alive>、<transition>、<transition-group>等組件
組件的實現(xiàn)是一個對象,注意它有一個屬性 abstract 為 true,表明是它一個抽象組件。
Vue 的文檔沒有提這個概念,在抽象組件的生命周期過程中,我們可以對包裹的子組件監(jiān)聽的事件進行攔截,也可以對子組件進行 Dom 操作,從而可以對我們需要的功能進行封裝,而不需要關(guān)心子組件的具體實現(xiàn)。
<!-- more -->
下面實現(xiàn)一個 debounce 組件,對子組件的 click 事件進行攔截
核心代碼如下:
<script> import {get, debounce, set} from 'loadsh'; export default { name: 'debounce', abstract: true, //標記為抽象組件 render() { let vnode = this.$slots.default[0]; // 子組件的vnode if (vnode) { let event = get(vnode, `data.on.click`); // 子組件綁定的click事件 if (typeof event === 'function') { set(vnode, `data.on.click`, debounce(event, 1000)); } } return vnode; } }; </script>
使用
<debounce> <button @click="clickHandler">測試</button> </debounce>
可以看到,按鈕的 click 事件已經(jīng)加上了去抖(debounce)操作。
我們可以進一步對 debounce 組件進行優(yōu)化。
<script> import {get, debounce, set} from '@/utils'; export default { name: 'debounce', abstract: true, //標記為抽象組件 props: { events: String, wait: { type: Number, default: 0 }, options: { type: Object, default() { return {}; } } }, render() { let vnode = this.$slots.default[0]; // 子組件的vnode if (vnode && this.events) { let eventList = this.events.split(','); eventList.forEach(eventName => { let event = get(vnode, `data.on[${eventName}]`); // 子組件綁定的click事件 if (typeof event === 'function') { /** * 加上debounce操作, 參數(shù)與 lodash 的debounce完全相同 */ set(vnode, `data.on[${eventName}]`, debounce(event, this.wait, this.options)); } }); } return vnode; } }; </script>
使用
<debounce events="click" :wait="250" :options="{maxWait: 1000}"> <button @click="clickHandler">測試</button> </debounce>
我們同樣可以為輸入框的 input 事件進行 debouce 操作
<debounce events="input" :wait="250" :options="{maxWait: 1000}"> <input @input="inputandler" placeholder="輸入關(guān)鍵字進行搜索" /> </debounce>
以上是“怎么用Vue編寫抽象組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。