写在前面
本文只针对使用 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 的解决方案, 仅供参考. 如果不对, 请指正!
来源: https://juejin.im/post/5b15ea29f265da6e4d5af504