前两天，有朋友在使用iview组件时想修改组件里面的某一个方法，当时推荐他使用优雅的修改node_modules中依赖包里面介绍的patch-package这个插件去搞，不过他期望只改里面一个方法，不想用这么重的方式，于是就有了这篇文章介绍的利用 Vue 中的 extends 去修改组件的方法。

先看下官方对 extends 的介绍：

允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件，这和 mixins 类似。

白话一点的就是：使用继承后 data、computed、methods等都被会覆盖，生命周期都会被触发（先触发被继承的，再触发继承后的）。

现在要修改 Slider 组件，那么就在这个组件做继承：

<script>
import { Slider } from 'view-design';
export default {
  name: "my-slider",
  extends: Slider,
  methods: {
    changeButtonPosition(newPos, forceType) {
      const type = forceType || this.pointerDown;
      const index = type === 'min' ? 0 : 1;
      if (type === 'min') newPos = this.checkLimits([newPos, this.max])[0];
      else newPos = this.checkLimits([this.min, newPos])[1];

      const modulus = this.handleDecimal(newPos, this.step);
      const value = this.currentValue;
      value[index] = newPos - modulus;

      // 判断左右是否相等，否则会出现左边大于右边的情况
      if (this.range) {
        if (type === 'min' && value[0] > value[1]) value[1] = value[0];
        if (type === 'max' && value[0] > value[1]) value[0] = value[1];
      }
      if (value[1] - value[0] > 75) {
        if (type === 'max') {
          value[1] = value[0] + 75;
        } else {
          value[0] = value[1] - 75;
        }
      }

      this.currentValue = [...value];
      if (!this.dragging) {
        if (this.currentValue[index] !== this.oldValue[index]) {
          this.emitChange();
          this.oldValue[index] = this.currentValue[index];
        }
      }
    },
  },
};
</script>

然后全局注册一下组件：

// 全局注册组件
import MySlider from './components/slider.vue'
Vue.component('my-slider', MySlider)

最后只要是用到 Slider 组件的时候，都用自己定义的这个组件即可。

Vue中API，还是要时不时的去看看，总能发现有用的！