用Vue编写抽象组件的方法


Posted in Javascript onMay 06, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
AngularJS中的模块详解
Jan 29 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
JS解惑之Object中的key是有序的么
May 06 #Javascript
微信小程序和百度的语音识别接口详解
May 06 #Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 #Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 #Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 #Javascript
JavaScript中关于base64的一些事
May 06 #Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 #Javascript
You might like
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP概率计算函数汇总
2015/09/13 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
JS的数组迭代方法
2015/02/05 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python中Threading用法详解
2017/12/27 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
七一党建活动方案
2014/01/28 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
思想品德课教学反思
2014/02/10 职场文书
高中语文课后反思
2014/04/27 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
毕业生党员个人总结
2015/02/14 职场文书
赤壁观后感(2)
2015/06/15 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers