用 Vue 編寫抽象組件

看過 Vue 源碼的同窗能夠知道，<keep-alive>、<transition>、<transition-group>等組件
組件的實現是一個對象，注意它有一個屬性 abstract 爲 true，代表是它一個抽象組件。

Vue 的文檔沒有提這個概念，在抽象組件的生命週期過程當中，咱們能夠對包裹的子組件監聽的事件進行攔截，也能夠對子組件進行 Dom 操做，從而能夠對咱們須要的功能進行封裝，而不須要關心子組件的具體實現。

<!-- more -->

下面實現一個 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 組件進行優化。

<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操做, 參數與 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>

本文做者： Shellming
本文連接： https://shellming.com/2019/05/06/vue-absract-components/ 版權聲明： 本博客全部文章除特別聲明外，均採用 CC BY-NC-SA 3.0 許可協議。轉載請註明出處！