Vue 组件间通信并不是每一次操作都会触发新的通信

news/2024/7/10 0:01:42 标签: vue

需求:新增或者修改都需要组件间立马通信。

操作:把B组件(子组件,这里指的是三级联动组件)的数据传输过来,在A(父组件)组件中处理 即 子传父 这里指的是修改页面或者新增页面三级联动下拉选择完之后 点击 提交 会执行A组件的修改操作。

也就是子组件=>父组件传数据

修改回显页码:

在这里插入图片描述
或者 把下图红框中的数据在点击修改的时候把数据在弹框(dialog)的三级联动中显示即上图红框。也就是父组件=>子组件传数据
在这里插入图片描述

结果:但是发现父子组件间互相通信时,刚开始刷新table页面后父子间传信利用props(父=>子)或者在自定义事件实现(子=>父)这个第一次是没问题的但是之后不刷新在点击修改按钮或者新增按钮时,拿到的数据都不是最新的数据,是上一次操作完的旧数据或者就是没数据。

为了实现每一次操做立马触发通信,拿到最新传递的数据,所以解决办法如下:

父=>子 触发立马通信:

父组件Home.vue

<!--areaselectupdate  是子组件-->
<areaselectupdate :regionfu="xqy.uparea" :key="timer"
             v-on:domainPro="getDomainPro"
             v-on:domainCity="getDomainCity"
             v-on:domainDist="getDomainDist">
 </areaselectupdate>

利用 :key="timer" 和 下面的日期毫秒值来立马触发父=>子通信

 //编辑回显
        handleUpdateClick(event){
            this.timer = new Date().getTime();
     }       

点击修改则咋修改的方法里面加获取当前时间毫秒值的计算,点击新增就在新增的方法里面加。点哪里哪里加。 子组件=>父组件也是一样的。


http://www.niftyadmin.cn/n/9946.html

相关文章

实验四:健康打卡

编写程序模拟实现防疫每日“健康打卡”。 健康打卡需要每天填报以下信息&#xff1a; 日期&#xff1a;年&#xff08;4位整数&#xff09;、月&#xff08;2位整数&#xff09;、日&#xff08;2位整数&#xff09;&#xff0c;打卡时可自动取PC机、手机上的当天日期和时间。…

Unity UI 框架

开源地址&#xff1a; GitHub - NRatel/NRFramework.UI: 基于 Unity UGUI 的 UI 开发框架基于 Unity UGUI 的 UI 开发框架. Contribute to NRatel/NRFramework.UI development by creating an account on GitHub.https://github.com/NRatel/NRFramework.UI 一、需求/功能要点…

Java中的线程

线程 什么是线程&#xff1a; 什么是多线程&#xff1a; 学习目的&#xff1a; 多线程的创建 方式一&#xff1a;继承Thread类 public class MyThread{public static void main(String[] args) {Thread thread01 new Thread01();thread01.start();for (int i 0; i < 5; …

13.4 GAS与攻击

目录1. 由GA砍出的第一刀2. 挥剑时的命中检测3. 完善&#xff1a;UI显示当前血量参考&#xff1a;1. 由GA砍出的第一刀 有了前面章节的经验&#xff0c;我们可以很容易创建一个专用于攻击的GA&#xff1a; 其中PlayMontageAndWait任务节点负责攻击动画及相应回调的绑定。 但是…

Flink-水位线的设置以及传递

6.2 水位线 6.2.1 概述 分类 有序流 无序流 判断的时间延迟 延迟时间判定 6.2.2 水位线的设置 分析 DataStream下的assignTimstampsAndWatermarks方法&#xff0c;返回SingleOutputStreamOperator本质还是个算子&#xff0c;传入的参数是WatermarkStrategy的生成策略 但…

SpringBoot如何配置拦截器呢?

转自: SpringBoot如何配置拦截器呢&#xff1f; 下文笔者讲述SpringBoot配置拦截器的方法分享&#xff0c;如下所示 一、编写拦截器实现类&#xff0c;实现HandlerInterceptor接口 public class MyInterceptor implements HandlerInterceptor {Overridepublic boolean preH…

java计算机毕业设计高校就业服务网站MyBatis+系统+LW文档+源码+调试部署

java计算机毕业设计高校就业服务网站MyBatis系统LW文档源码调试部署 java计算机毕业设计高校就业服务网站MyBatis系统LW文档源码调试部署本源码技术栈&#xff1a; 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 开发软件&#xff1a;idea eclipse 前端技术&a…

汇编语言与微机原理 期末复习题整理(大题)

写出实现下列计算的指令序列。&#xff08;假定X、Y、Z、W、R都为有符号字变量&#xff09; Z 2*&#xff08;W-X&#xff09;/&#xff08;5*Y&#xff09; ;因为(5*Y)会出现32位变量&#xff0c;32位变量不能作为除数&#xff0c;所以需要改变运算顺序 MOV AX,W ;AX←W S…