用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 事件已經(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="輸入關鍵字進行搜索" />
</debounce>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
有的時候項目需要在頁面使用快捷鍵，而且需要對快捷鍵進行維護。本文將為大家展示Vue實現(xiàn)快捷鍵錄入功能的示例代碼，感興趣的可以了解一下2022-04-04
關于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element table組件內(nèi)容換行的實現(xiàn)方案
這篇文章主要介紹了element table組件內(nèi)容換行的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
vite中的glob-import批量導入的實現(xiàn)
本文主要介紹了vite中的glob-import批量導入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
本篇文章主要介紹了詳解vue slot插槽的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue高級特性概念原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-03-03
這篇文章主要為大家介紹了三種方法，可以實現(xiàn)將HTML頁面轉為PDF并實現(xiàn)下載。文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下2022-04-04
這篇文章主要介紹了Vue項目中props傳值時子組件檢測不到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
Vue實現(xiàn)項目部署到非根目錄及解決刷新頁面時找不到資源
這篇文章主要介紹了Vue實現(xiàn)項目部署到非根目錄及解決刷新頁面時找不到資源問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03