,
,
, etc.

,
,
, etc.

,
, < Transition-group >, etc.

Vue’s documentation does not mention this concept. During the life cycle of an abstract component, we can intercept the events that the subcomponents of the package listen to, and we can also perform Dom operations on the subcomponents, so that we can encapsulate the functionality we need, regardless of the implementation of the subcomponents.

Let’s implement onedebounceComponent, for subcomponentsclickEvent intercept

The core code is as follows:

<script> import {get, debounce, set} from 'loadsh'; Export default {name: 'debounce', abstract: true, let vnode = this.$slots.default[0]; If (vnode) {let event = get(vnode, 'data.onclick'); If (typeof event === 'function') {set(vnode, 'data.on.click', debounce(event, 1000)); } } return vnode; }}; </script>Copy the code

use

</button> </debounce>Copy the code

As you can see, the button’s click event has been added with a debounce action.

We can do a little bit moredebounceComponent optimization.

<script> import {get, debounce, set} from '@/utils'; Export default {name: 'debounce', props: {events: String, wait: {type: Number, default: 0 }, options: { type: Object, default() { return {}; } } }, render() { let vnode = this.$slots.default[0]; // Subcomponent vNode if (vnode && this.events) {let eventList = this.events.split(','); eventList.forEach(eventName => { let event = get(vnode, `data.on[${eventName}]`); If (typeof event === 'function') {/** * add the same argument as lodash's debounce */ set(vnode, `data.on[${eventName}]`, debounce(event, this.wait, this.options)); }}); } return vnode; }}; </script>Copy the code

use

<debounce events="click" :wait="250" :options="{maxWait: 1000}"> <button @click="clickHandler">Copy the code

We can also debouce the input event for the input box

<debounce events="input" :wait="250" :options="{maxWait: }"> <input @input="inputandler" placeholder=" /> </debounce>Copy the code

In this paper, the author: Shellming this article links: shellming.com/2019/05/06/… Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless otherwise noted. Reprint please indicate the source!