vue中UI与逻辑分离，抛出事件进行统一封装

92 阅读 0 评论 61 点赞

我是靠谱客的博主专一荔枝，这篇文章主要介绍vue中UI与逻辑分离，抛出事件进行统一封装，现在分享给大家，希望可以做个参考。

如果一个.vue中有很多的事件都要进行emit抛出去，进行多次emit不如封装一下一次性抛出去。
方法如下：

vue中template部分：

复制代码

1
2
3
4
5
<div
  @click.stop="onClickHandler($event, 'yourEvent')"
></div>
// 优雅一点的写法，可以将string类型的事件命名为数字，一个数字代表一个事件。

js部分：

复制代码

1
2
3
4
5
6
7
8
9
10
11
 onClickHandler: debounce(function (e, eventType) {
      if ([1, 3, 5, 7, 9].includes(eventType)) {
        // 事件逻辑
      } else {
        // 事件逻辑
      }
      this.$emit('onComClick', e, {
        eventType
      });
    }),

这边就已经通过onComClick把事件抛出去了，另一个文件的结构：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    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
    },