Написание абстрактных компонентов с помощью Vue

Vue.js

Студенты Vue могут прочитать исходный код, чтобы узнать,<keep-alive>,<transition>,<transition-group>И другие компоненты Реализация компонента — это объект, обратите внимание, что у него есть свойствоabstractдляtrue, указывая на то, что это抽象组件.

В документации Vue эта концепция не упоминается в абстрактном компоненте.Жизненный циклпроцесс, мы можем вносить изменения в обернутые подкомпонентыперехваченные события, вы также можете сделать это на подкомпонентахДом операций, чтобы мы могли инкапсулировать нужные нам функции, не заботясь о конкретной реализации подкомпонентов.

Следующее реализует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Компоненты оптимизированы.

<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>

Мы также можем отменить входное событие поля ввода.

<debounce events="input" :wait="250" :options="{maxWait: 1000}">
    <input @input="inputandler" placeholder="输入关键字进行搜索" />
</debounce>

Автор этой статьи:Shellming
Ссылка на эту статью:Реликвия Dawn.com/2019/05/06/…
Уведомление об авторских правах. Все статьи в этом блоге находятся под лицензией CC BY-NC-SA 3.0, если не указано иное. Пожалуйста, укажите источник!

Категории