写了个一个及其复杂的前端功能,需要把数据放到一个主页面来去进行共享,别的子页面到主页面去拿数据,进行筛选查询等等操作,本来想着个数据存储放到后端,但是最后的一步必须是原子性,就搞得很难受

 

这么写的太麻烦了,子页面有十多个,而且都有联系,不管是代码维护还是其他因素考虑,代码写的太多了

思考了一番,是否能够让Emit有返回值如图:

 之后经过研究发现,是可以的,红色的框返回的是本身的页面。而蓝色框是进行调用这个方法,运行之后发现这个方法是有返回值的

 刚开始想重写这个方法,不过发现如果重写这个方法,所有页面都会进行改变,肯定不现实,所以就思考了一个最笨的办法,重新写这个方法,因为考虑到我只需要调用一个父级函数,没有考虑到多个父级函数的场景

展示效果: 

 子模块

 父模块

 debugger:

子模块调用前:

父模块调用中: 

 子模块调用结束:​​​​​​​

最后附上修改的代码:

Vue.prototype.$resultEmit = function (event) {
    var vm = this;
    if (process.env.NODE_ENV !== 'production') {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    var reslut = undefined;
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      var info = "event handler for \"" + event + "\"";
      for (var i = 0, l = cbs.length; i < l; i++) {
        reslut = invokeWithErrorHandling(cbs[i], vm, args, vm, info);
      }
    }
    return reslut
  };

Logo

前往低代码交流专区

更多推荐