Vue组件内部如何改写所有$emit抛出的参数？

Question

问题：有个要求，需要统一组件的事件传递参数，如

// 原有组件抛出的事件
this.$emit('change', params1);

// 期望改写成
this.$emit('change', this, params1);

// 如果上一种无法实现，这种写法也能将就
this.$emit('xxx-change', this, params1);

因为要改写很多事件，又不能直接改原有的代码，如何快速实现？

思路1：事件自身监听自身的事件，然后另外传递事件。
问题：但是这只是改了一种事件，没能做到所有事件都改写。

this.$on('change', (...params) => {
    this.$emit('xxx-change', this, ...params);
});

思路2：用nodejs遍历文件，读取文件源码匹配$emit，将$emit的事件记录下来，然后用思路1的方式批量插入代码。
问题：需要编辑nodejs脚本，另外组件如果不是单文件，有继承或mixins混合场景会比较麻烦。

Answer 1

修改原型链的方法，不过这样你父组件绑定的函数不也是需要一个个改吗？要统一参数，也应该加在原有参数后面怎么会插在前面

var $emit = Vue.prototype.$emit;
Vue.prototype.$emit = function(event, ...args) {
      $emit.apply(this,['component-name'].includes(this.$options.name) ? [event, this].concat(args) : [event].concat(args))
}

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

在 VSCode 启用 正则 批量替换内容，
比如说你提到的 this.$emit('change', params1);
可以写成 this\.\$emit\('(.\w+)',(.\w+)\)
然后再替换框内这样书写 this.$emit('$1',this,$2)

附带上效果截图

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。