一聚教程网:一个值得你收藏的教程网站

热门教程

用Vue编写抽象组件的教程

时间:2022-06-25 15:23:28 编辑:袖梨 来源:一聚教程网

看过 Vue 源码的同学可以知道,等组件

组件的实现是一个对象,注意它有一个属性 abstract 为 true,表明是它一个抽象组件。

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

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

核心代码如下:



使用


  

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

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



使用


  

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


  

热门栏目