Vue之重写$emit函数，全局监听$emit的触发 - 戴向天

大家好！我叫戴向天

QQ群：602504799

如若有不理解的，可加QQ群进行咨询了解

本编文章写得比较简洁，感兴趣的可以进群咨询。

或许有人会很疑惑，干嘛重写$emit方法。原因是重写以后就可以进行异步改变子组件暴露出去的方法

效果如下：

例如：

<component @clickHandler="clickHandler" @clickOne="clickOne"  @clickTwo="clickTwo" />

从上面的例子可以得知，子组件至少使用的三次$emit。并且每个emit的第一个参数名，都不一样

$emit('clickHandler')
$emit('clickOne')
$emit('clickTwo')

如果我们重写了emit函数就可以做到，不管子组件想触发什么样的函数，我们都可以重写进行定向处理

demo

<component 
	v-for="(cmp,key) in cmps" 
	:key="key" 
	:is="cmp.name"
	@eventHandler="eventHandler"
	@eventOne="clickOne"
	@eventTwo="eventTwo"
 />
/**
	上例：当我们是动态组件的时候，由于组件的不确定性，我们就需要加上许多的@eventName进行接收处理，
*/
<component 
	v-for="(cmp,key) in cmps" 
	:key="key" 
	:is="cmp.name"
	@handler="handler"
 />
 /**
	如果我们重写的$emit方法的话，我们就可以实现，无论子组件触发哪个事件，我们都可以进行一个函数统一处理，进行重新定向
*/

const _emit = this.$emit
this.$emit = function (event) {
  if (this.getType(event, 'string')) {
    const a = [].slice.call(arguments, 1, arguments.length);
    if(a.length){
      console.log(`您触发$emit函数已被截取到：函数名：${event}`)
    }
    const params = a.map((item, index) => {
      return `a[${index}]`
    }).join(',')
    // 进行触发指定的函数 接收到的参数就是 
    // 自己所定义的函数名，真正触发的函数名，参数...
    eval(`_emit.call(this,'handler',event,${params || ''})`)
  }

}