用Vue編寫抽象組件的方法
更新時間：2019年05月06日 14:51:12 作者：xm726
這篇文章主要介紹了用Vue編寫抽象組件的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
看過 Vue 源碼的同學可以知道，<keep-alive>、<transition>、<transition-group>等組件
組件的實現(xiàn)是一個對象，注意它有一個屬性 abstract 為 true，表明是它一個抽象組件。
Vue 的文檔沒有提這個概念，在抽象組件的生命周期過程中，我們可以對包裹的子組件監(jiān)聽的事件進行攔截，也可以對子組件進行 Dom 操作，從而可以對我們需要的功能進行封裝，而不需要關心子組件的具體實現(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 事件已經加上了去抖(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="輸入關鍵字進行搜索" />
</debounce>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了Vue中fragment.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
今天小編就為大家分享一篇Vue修改項目啟動端口號方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了在vue中完美使用ueditor組件(cdn)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
React和Vue都使用虛擬DOM和diff算法來更新DOM,但它們在實現(xiàn)上有所不同,React采用基于索引的比較,Vue采用雙端比較算法,React在比較時不復用不同類型的節(jié)點,而Vue會優(yōu)先復用兩端相同的節(jié)點,React對key的依賴較高,而Vue在沒有key時也能通過雙端比較優(yōu)化2025-03-03
vue實現(xiàn)導航欄效果(選中狀態(tài)刷新不消失)
這篇文章主要為大家詳細介紹了vue實現(xiàn)導航欄效果，選中狀態(tài)刷新不消失，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了vue.js+boostrap項目實踐(案例詳解)的相關資料,本文圖文并茂介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了NUXT SSR初級入門筆記(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Vue自定義指令上報Google Analytics事件統(tǒng)計的方法
我們經常需要接入統(tǒng)計服務以方便運營，這篇文章主要介紹了Vue自定義指令上報Google Analytics事件統(tǒng)計的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02