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

星空
  • 1.2k

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

// 原有组件抛出的事件
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混合场景会比较麻烦。

回复
阅读 211
2 个回答
✓ 已被采纳

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

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 思否「问答」打卡,欢迎正在阅读的你也加入。

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

附带上效果截图
image.png


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

宣传栏