阅读 1448

开发VUE使用第三库,发现有bug怎么办?

写在前面

本文只针对使用vue技术栈,进行讨论。

正文

使用vue技术栈开发,难免会使用第三库,这大大提高了我们开发的效率。然而,这是第三方库有bug怎么办?

既然有bug,就是现有功能没有达到预想效果。除了,等作者更新之外有没有其他方法解决? 作为有作为的青年,当然不能坐以待毙咯。

第一步

阅读第三方库源码,怎么阅读这里就不要展开。 阅读源码,找不问题所在。

第二部

找到了问题所在,怎么解决,给作者提bug?

恩~ 这个想法不错。但是,我们其他办法解决。

既然代码存在bug,我们可以重写有bug的代码。

没有错,就是重写代码。vue在提供了extends和mixins提供重写代码的方式。关于extends和mixins可以阅读之前的一篇文章:vue mixins和extends的妙用

举个例子:使用mint-ui Swipe组件过程中发现存在的bug

import {
  Swipe
} from 'mint-ui'
export default {
  components: {
    imageSwipe: {
      extends: Swipe,
      watch: {
        defaultIndex (val) {
          this.reInitPages()
        }
      }
    }
  }
 }
复制代码

上面代码的做法就是,定义一个imageSwipe,继承mint-ui的Swipe组件,加一个watcher。

这时候使用imageSwipe时,props、event和slots与mint-ui的Swipe组件是一样的。

<image-swipe></image-swipe>
复制代码

有上面重写组件的思路,基本上可以开拓了一片新大陆,说的有点夸张, 哈哈哈~

写在后面

假设,组件中嵌套为暴露出来的组件,这时没有办法从组件引入,可以在原有组件的基础上重写、继承之后,开发出新的功能,不一定修复存在的bug。

import {
  Table
} from 'element-ui'

export default {
  extends: Table.components.TableHeader
}
复制代码

以上是重写Table中的tableHeader组件,tableHeader组件无法从element-ui中获取,通过Table.components.TableHeader去获取。

本文提供一种解决在引用第三库存在bug的解决方案,仅供参考。如果不对,请指正!

关注下面的标签,发现更多相似文章
评论
说说你的看法