大家好!我叫戴向天
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 || ''})`)
}
}