用 Vue 编写抽象组件

voyagelab 发布于2019-08-23 17:18 / 3423人阅读

摘要：看过源码的同学可以知道，等组件组件的实现是一个对象，注意它有一个属性为，表明是它一个抽象组件。我们可以进一步对组件进行优化。

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

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

下面实现一个 debounce 组件，对子组件的 click 事件进行拦截

核心代码如下：

使用

可以看到，按钮的 click 事件已经加上了去抖(debounce)操作。

我们可以进一步对 debounce 组件进行优化。

使用

我们同样可以为输入框的 input 事件进行 debouce 操作

本文作者： Shellming
本文链接： https://shellming.com/2019/05/06/vue-absract-components/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104134.html

vue总结系列--数据驱动和响应式

摘要：由于是需要兼容的后台系统，该项目并不能使用到等技术，因此我在上的经验大都是使用原生的编写的，可以看见一个组件分为两部分视图部分，和数据部分。在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动，组件化的框架和react很像，从一开始的快速上手基本的开发，到后来开始自定义组件，对element UI的组件二次封装以满足项目需求，期间也是踩了不少坑。由于将来很长一...

AbnerMing 2019-08-22 18:26 评论0 收藏0
前端开发思维转变——从事件驱动到数据驱动

摘要：趁热打铁，梳理下这段时间学习和使用以后，给自己最大的收获开发思维转变。事件驱动先说说以前前端发开的思维方式。分开设计页面结构和数据结构，然后将与数据结构做关联，之后所有的事件触发的都只是数据的变化，会自动根据数据的变化做相应改变。加班加点连续一个多月，总算是快把一个开始时心里完全没有底的项目收工了。新项目基于旧系统开发，在保留原有老架构jade + knockout + jquery...

learning 2019-08-20 18:03 评论0 收藏0
「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
vue总结系列--组件化

摘要：触发事件可以携带数据，这些数据被用于传递给绑定了事件的其它组件的回调函数上，进而被传递给其它组件。父组件可以在回调函数里做任何事情，颇有灵活性。一般情况下，父组件会在回调函数中更新自己的状态数据。上一篇博文梳理了vue的数据驱动和响应式相关的特性，这一篇博文就来梳理vue的一个很重要的特性，组件化。自定义组件之于vue，其意义不亚于函数之于C，java之类的编程语言。函数是计算机科学...

cuieney 2019-08-22 18:28 评论0 收藏0
【手牵手】搭建前端组件库（一）

摘要：手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库了解几个问题为何需要组件化大部分项目起源都是源于业务方的各种各样的奇葩需求。作者是否私有，需要修改为才能发布到开源协议参考配置添加文件发布时，只有编译后的目录才需要被发布。手牵手搭建前端组件库本文梳理如何搭建和构建前端组件库. showImg(https://segmentfault.com/img/bVboZDt?w=1200&...

waltr 2019-08-23 15:30 评论0 收藏0