用Vue編寫抽象組件的方法
看過(guò) Vue 源碼的同學(xué)可以知道，<keep-alive>、<transition>、<transition-group>等組件
組件的實(shí)現(xiàn)是一個(gè)對(duì)象，注意它有一個(gè)屬性 abstract 為 true，表明是它一個(gè)抽象組件。
Vue 的文檔沒(méi)有提這個(gè)概念，在抽象組件的生命周期過(guò)程中，我們可以對(duì)包裹的子組件監(jiān)聽(tīng)的事件進(jìn)行攔截，也可以對(duì)子組件進(jìn)行 Dom 操作，從而可以對(duì)我們需要的功能進(jìn)行封裝，而不需要關(guān)心子組件的具體實(shí)現(xiàn)。
<!-- more -->
下面實(shí)現(xiàn)一個(gè) debounce 組件，對(duì)子組件的 click 事件進(jìn)行攔截
核心代碼如下：
<script>
import {get, debounce, set} from 'loadsh';
export default {
name: 'debounce',
abstract: true, //標(biāo)記為抽象組件
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">測(cè)試</button> </debounce>
可以看到，按鈕的 click 事件已經(jīng)加上了去抖(debounce)操作。
我們可以進(jìn)一步對(duì) debounce 組件進(jìn)行優(yōu)化。
<script>
import {get, debounce, set} from '@/utils';
export default {
name: 'debounce',
abstract: true, //標(biāo)記為抽象組件
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">測(cè)試</button>
</debounce>
我們同樣可以為輸入框的 input 事件進(jìn)行 debouce 操作
<debounce events="input" :wait="250" :options="{maxWait: 1000}">
<input @input="inputandler" placeholder="輸入關(guān)鍵字進(jìn)行搜索" />
</debounce>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue中fragment.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue修改項(xiàng)目啟動(dòng)端口號(hào)方法
今天小編就為大家分享一篇Vue修改項(xiàng)目啟動(dòng)端口號(hào)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了在vue中完美使用ueditor組件(cdn)解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue和React中diff算法的區(qū)別及說(shuō)明
React和Vue都使用虛擬DOM和diff算法來(lái)更新DOM,但它們?cè)趯?shí)現(xiàn)上有所不同,React采用基于索引的比較,Vue采用雙端比較算法,React在比較時(shí)不復(fù)用不同類型的節(jié)點(diǎn),而Vue會(huì)優(yōu)先復(fù)用兩端相同的節(jié)點(diǎn),React對(duì)key的依賴較高,而Vue在沒(méi)有key時(shí)也能通過(guò)雙端比較優(yōu)化2025-03-03
vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)
這篇文章主要介紹了vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級(jí)入門)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了NUXT SSR初級(jí)入門筆記(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營(yíng)，這篇文章主要介紹了Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02