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

如果一个.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
    },

最后

以上就是专一荔枝为你收集整理的vue中UI与逻辑分离，抛出事件进行统一封装的全部内容，希望文章能够帮你解决vue中UI与逻辑分离，抛出事件进行统一封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。