组件内方法重写

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

需求

前端现在有很多组件，用起来也非常的方便，让我们可以不用重复造轮子，节约了很多开发时间，也让前端开发变得简单很多。

但是呢，偶尔我们用到的组件版本可能有一个小bug，或者不太能满足我们的需求，刚好让我们遇到了（毕竟大佬们不是神）。这个时候，换一个组件库又太麻烦了，自己重写一个组件，耗时又太长，这个时候可以考虑一下重写组件内的方法

实现

这里以vue+element为例，比如说我们想重写element组件库内的el-button的click方法，我们想对每次点击事件做一个埋点处理。

翻一下代码，我们有两次机会可以重写el-button的方法。

第一次，是在el-button引入的时候，如果el-button是全局引入，那么在这个时候重写，就是针对所有的el-button进行的重写，方法如下：

import ElementUI from 'element-ui'
ElementUI.Button.methods.handleClick = function (evt) {
  // 这里的 this是指向的button
  console.log('evt -->', evt, this)
  // 统一埋点处理
}

但当我们只想对某个页面的某一个el-button进行重写，就可以采用$refs获取到el-button对象，再进行重写，方法如下：

mounted () {
    this.$refs.myButton.handleClick = (evt) => {
      // 这里的this指向的是当前页面
      console.log('evt -->', evt, this)
      // 统一埋点处理
    }
}

注意了，请细看下面的代码

mounted () {
    this.$refs.myButton.handleClick = function (evt) {
      // 这里的this 为null
      console.log('evt -->', evt, this)
      // 统一埋点处理
    }
}

这里就有趣了，第一种方式this的指向是当前页面，第二种方式this是null，要想拿到button对象，可以通过闭包来拿，代码如下：

mounted () {
    this.$refs.myButton.handleClick = (evt) => {
      console.log('evt -->', evt, this.$refs.myButton)
      // 统一埋点处理
    }
}

网上也有一些直接重写整个组件的方法，我自己也有用到，不过很多复杂组件内引用太多，单独重写一个组件的时候，需要将进行组件进行引入，写起来有点小麻烦，所以能通过对象直接修改内部方法的时候，更推荐使用这种方法进行修改。