不同页面之间通讯交互数据;明细页保存后刷新A页面数据


场景

在B页面刷新A页面数据,数据编辑页面保存数据后,要刷新数据列表页面的数据,因为是两个不同页面,因此不能直接交互

方案

YESWEB开发框架 提供了 $eventHub 属性,专门用于页面之前通讯

实现

比如我们现在有两个页面:客户列表页客户编辑页

我们想要在客户编辑页保存的时候,自动刷新客户列表页的数据

1) 客户列表页注册事件 customer.update

我们需要在客户列表页的create方法中注册一个事件,事件名字要唯一

演示代码我们定义的事件名字为:customer.update

JavaScript 全选
  created() {
    this.$eventHub.$on("customer.update", this.refrshData);
  },
  beforeDestroy() {
    this.$eventHub.$off("customer.update", this.refrshData);
  },

2) 客户编辑页调用事件 customer.update

在客户编辑页保存后,调用 customer.update 事件 this.$eventHub.$emit('customer.update')

JavaScript 全选
    // 提交
    onEventSubmit(btn) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          var req;
          if (utils.isNULL(this.data[this.keyField])) {
            req = request.create(this, this.data);
          } else {
            req = request.update(this, this.data);
          }

          req.then((res) => {
            this.drawer = false;
            this.$message({
              message: "保存成功",
              type: "success",
            });
            this.$eventHub.$emit('customer.update')
            this.$parent.closeCurrent(this.afterCloseGoUrl);
          });
        } else {
          this.$message({
            message: "请完善数据",
            type: "warning",
          });
          return false;
        }
      });

 

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
关联文章

不同页面之间通讯交互数据明细保存刷新A页面数据
【JOC】不同页面/组件之间通讯交互数据
agGrid数据更改刷新表格数据
ASP.NET Core MVC 在过滤器ActionFilter中保存页面的生成的html静态页面文件
VUE3版本 页面切换数据丢失问题
AgGrid使用CellRendererFramework,修改数据调用applyTransaction数据刷新
百亿级数据 分库分表 怎么分查询?
模板修改无法保存
百亿级数据 分库分表 怎么分查询?
保存数据,最后一个文本框取值问题
AgGrid 改变数据表格不刷新
fastreport明细自动高度
基于欧姆龙PLC#FinsTcp协议上位机通讯(二)-C#通讯模块开发
agGrid修改数据,表格显示不刷新
AgGrid 刷新表格数据自动填充列宽度
页面快排插件配置支持图片上传
页面快排插件开发
WPF 组织机构摄像机树 全量加载 大数据量 分加载摄像机节点
Devexpress GridControl明细标签控制,隐藏detail标签
EF并发处理,防止并发修改数据