用 Vue 编写抽象组件

港控/mmm° 2022-01-21 12:27 239阅读 0赞

看过 Vue 源码的同学可以知道，`<keep-alive>`、`<transition>`、`<transition-group>`等组件 组件的实现是一个对象，注意它有一个属性 `abstract` 为 `true`，表明是它一个`抽象组件`。

Vue 的文档没有提这个概念，在抽象组件的**生命周期**过程中，我们可以对包裹的子组件**监听的事件进行拦截**，也可以对子组件进行 **Dom 操作**，从而可以对我们需要的功能进行封装，而不需要关心子组件的具体实现。

**下面实现一个 `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][]  
> 本文链接： [shellming.com/2019/05/06/…][shellming.com_2019_05_06]  
> 版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！

[Shellming]: https://link.juejin.im?target=shellming.com
[shellming.com_2019_05_06]: https://link.juejin.im?target=https%3A%2F%2Fshellming.com%2F2019%2F05%2F06%2Fvue-absract-components%2F

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 常用组件库

本文转载至：[http://blog.csdn.net/zgrkaka/article/details/53897202][http_blog.csdn.net_zgrkaka

青旅半醒/ 2023年10月17日 13:18/ 0 赞/ 64 阅读

相关 vue3编写组件库发布到npm的过程

一、将src文件夹改成examples文件夹改变后项目无法运行需要在项目根目录新建vue.config.js文件并加入如下配置 module.exports =

墨蓝/ 2023年02月22日 13:58/ 0 赞/ 41 阅读

相关 spring编写组件之分布式组件

引入maven依赖的相关jar包 <dependency> <groupId>org.springframework.boot</groupId>

比眉伴天荒/ 2022年12月29日 09:11/ 0 赞/ 86 阅读

相关 vue动态组件的用法

前文今天写一篇关于vue组件的扩展用法，之前将一些基本用法已经写过了，没有看过的可以自行找一下，今天要写的是一片关于vue 官方给的动态组件的一种用法，其实这个用法的

心已赠人/ 2022年12月13日 04:47/ 0 赞/ 210 阅读

相关 React -- 组件间抽象

在React组件的构建过程中，常常有这样的场景，有一类功能需要被不同的组件公用。此时就涉及到了抽象的话题。下面我们重点讨论：mixin和高阶组件。 mixin mi

喜欢ヅ旅行/ 2022年06月13日 00:38/ 0 赞/ 136 阅读

相关 Vue-ui常用组件库整理

[Vue-ui常用组件库整理][Vue-ui] [查看全部整理内容==》][Vue-ui] element-ui Element 是由饿了么UED设计、饿了么大前

快来打我*/ 2022年04月16日 03:19/ 0 赞/ 287 阅读

相关 vue中用组件封装过渡动画

组件中要有props接收一个值，比如：show；组件的template中transition和slot的结合，可以接收父组件中的标签；过渡效果通过js钩子函数实现。这样就可以实

àì夳堔傛蜴生んèń/ 2022年04月15日 04:16/ 0 赞/ 348 阅读

相关用 Vue 编写一个长按指令

最近学习了一下vue.js。对这一框架的最深刻印象就是vue的组件化思想和数据驱动视图而不直接操作DOM的思想。在JQuery逐渐黯淡的前端发展趋势下，这种UI状态的变化操作方

落日映苍穹つ/ 2022年03月16日 13:37/ 0 赞/ 290 阅读

相关用 Vue 编写抽象组件

看过 Vue 源码的同学可以知道，`<keep-alive>`、`<transition>`、`<transition-group>`等组件组件的实现是一个对象，注意它有一个

港控/mmm°/ 2022年01月21日 12:27/ 0 赞/ 240 阅读

相关 React--组件间抽象

在React组件构建的过程中，常常会有一类功能需要不同的组件公用的情况。此时就涉及到了抽象的问题。文章目录 mixin 封装mixin方法

不念不忘少年蓝@/ 2021年12月09日 23:01/ 0 赞/ 235 阅读