如果一个.vue
中有很多的事件都要进行emit抛出去,进行多次emit不如封装一下一次性抛出去。
方法如下:
vue中template
部分:
<div
@click.stop="onClickHandler($event, 'yourEvent')"
></div>
// 优雅一点的写法,可以将string类型的事件命名为数字,一个数字代表一个事件。
js部分:
onClickHandler: debounce(function (e, eventType) {
if ([1, 3, 5, 7, 9].includes(eventType)) {
// 事件逻辑
} else {
// 事件逻辑
}
this.$emit('onComClick', e, {
eventType
});
}),
这边就已经通过onComClick
把事件抛出去了,另一个文件的结构:
onComClick(e, data) {
console.log(data);
if (!data) return;
switch (eventType) {
case 1:
this.event0(0);
break;
case 2:
this.event1(1);
break;
case 3:
this.event2(2);
break;
}
},
event0() {
XXX
},
event1() {
XXX
},
event2() {
XXX
},