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

news2025/1/18 8:49:21

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

操作:把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.coloradmin.cn/o/18664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

开启安全测试评估赛道,永信至诚发布“数字风洞”产品体系

11月19日&#xff0c;永信至诚产品战略发布会上&#xff0c;面向安全测试评估领域的“数字风洞”产品体系战略发布&#xff0c;标志着永信至诚作为网络靶场和人才建设领军企业&#xff0c;再次以“产品乘服务”的价值体系&#xff0c;开启网络安全测试评估专业赛道。 数字化时代…

MySQL安装

本笔记来自B站黑马程序员讲解的MySQL的使用。 目录 ​编辑 一、MySQL的安装 1、数据库基础概念 2、MySQL下载并安装​编辑 三、启动MySQL 四、连接MySQL数据库 1、使用MySQL提供的客户端命令来连接 2、使用Windows 命令打开&#xff1a; 第一步 配置path的环境变量 第…

uniapp入门:常用事件绑定与数据同步

1.常见事件与事件绑定 1.1点击事件bindtap 1.2 文本输入事件bindinput 1.3 切换事件bindtouchend 2.数据同步 2.1事件回调 2.2逻辑层中page对象中的中数据如何进行改变 2.3页面触发事件如何传参到page中数据 …

ASEMI代理艾赛斯二极管DSA300I100NA,肖特基DSA300I100NA

编辑-Z 艾赛斯硅肖特基二极管DSA300I100NA参数&#xff1a; 型号&#xff1a;DSA300I100NA 最大重复反向阻断电压&#xff08;VRRM&#xff09;&#xff1a;100V 反向电流、漏极电流&#xff08;IR&#xff09;&#xff1a;3mA 正向电压降&#xff08;VF&#xff09;&…

STM32CubeMX外部中断

建议提前学习&#xff1a;使用STM32CubeMX实现按下按键&#xff0c;电平反转&#xff1b; 目录 EXTI 中断 中断的概念 抢占优先级与响应优先级 中断分组 事件 上升沿&#xff0c;下降沿以及双边沿触发 上升沿&#xff0c;下降沿以及双边沿的概念 上升沿&#xff0c;下…

数据结构-双链表思路解析及代码实现

双链表是单链表的进阶版&#xff0c;单链表是1-2-3-4 一个个排排坐链接&#xff0c;只管向后拉手&#xff0c;其主要思想是当前节点与下一节点的关系&#xff0c;那么双链表就多了一层关系&#xff0c;当前节点不仅和一下一点连起来&#xff0c;也要和上一节点串联起来。与前与…

【全志T113-S3_100ask】13-1 Linux c语言ioctl驱动oled(iic、ssd1306)屏幕

【全志T113-S3_100ask】13-1 Linux C通过ioctl驱动oled[ssd1306]屏幕 背景&#xff08;一&#xff09;i2c关键结构体1、i2c_rdwr_ioctl_data结构体2、struct i2c_msg结构体&#xff08;二&#xff09;i2c关键代码1、写函数2、读函数&#xff08;三&#xff09;对oled的操作&…

深度学习和神经网络的介绍(一)

1、深度学习和神经网络 1.1 深度学习的介绍 目标&#xff1a; 知道什么是深度学习知道深度学习和机器学习的区别能够说出深度学习的主要应用场景知道深度学习的常见框架 1.1.1 深度学习的概念 深度学习是机器学习的分支&#xff0c;是一种以人工神经网络为架构&#xff0c…

计算机网络4小时速成:计算机网络基础,计网组成,计网分类,性能指标,标准化组织,计网结构模型,五层模型

计算机网络4小时速成&#xff1a;计算机网络基础&#xff0c;计网组成&#xff0c;计网分类&#xff0c;性能指标&#xff0c;标准化组织&#xff0c;计网结构模型&#xff0c;五层模型 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&…

05_TCP并发服务器

知识点1【TCP并发服务器】 1、多线程&#xff08;常用&#xff09; 2、解决上述问题&#xff1a;端口复用 仅仅是端口的复用 3、并发服务器 多进程实现 总结&#xff1a; 知识点2【HTTP协议】 HTTP基于TCP 1、HTTP协议的概述 2、Webserver 通信过程 3、Web编程开发 知识…

Cadence orcad 批量设置原理图标题栏

前言 作为一份规范的原理图文件&#xff0c;必须要有Title Block&#xff0c;一般是在右下角的原理图信息&#xff0c;包括标题&#xff0c;图纸尺寸&#xff0c;设计师&#xff0c;时间&#xff0c;页码等等。 这里需要两个操作&#xff1a; 一、批量修改Title Block的信息 …

Go语言进阶篇,单元测试、基准测试的性能测试、内存占用测试

在go语言中的单元测试比较有意思&#xff0c;比如测试一个函数是很方便的&#xff0c;只需要将文件名修改为_test.go这样的后缀即可&#xff0c;我们新建一个目录xxx&#xff0c;然后新建xxx_test.go文件&#xff0c;当然这个xxx的名字你可以按照功能来命名&#xff0c;如下&am…

Java开发:多线程编程

本章篇幅主要记录多线程编程相关的知识&#xff0c;如有纰漏&#xff0c;望指出。 话不多说&#xff0c;正式开启多线程之旅... 目录 一、多线程使用方式 A、Thread B、Runnable&#xff08;推荐&#xff09; C、Callable 二、线程的五个状态 三、线程停止 四、线程休…

LabVIEW性能和内存管理 7 LabVIEW中局部和全局变量的内存分配

LabVIEW性能和内存管理 7 LabVIEW中局部和全局变量的内存分配 本文介绍LabVIEW性能和内存管理的几个建议7。 LabVIEW Cleanup – LabVIEW cleans upmany references when the owning VI goes idle and others when the process closes – Manually closereferences t…

Bean的作用域和生命周期

1. Bean 的作用域 对于全局变量,局部变量等的作用域相信大家都已经很清楚了,但是对于对象作用域有点摸不着头脑,下面通过一个简单的案例,康康对象的作用域 1.1 案例引入 现有一个公共的 Bean 对象 package com.bean.model;import org.springframework.stereotype.Componen…

【IEEE2017】RL:机器人库:一种面向对象的机器人应用程序的方法

RL&#xff1a;机器人库&#xff1a;一种面向对象的机器人应用程序的方法 摘要&#xff1a; 摘要&#xff1a;我们讨论了机器人库&#xff08;RL&#xff09;的架构和软件工程原理。在机器人系统、研究项目、工业应用和教育的需求的驱动下&#xff0c;我们确定了相关的设计需求…

linux上如何搭建Java环境

一 linux软件安装常用的方式对比 Linux下的软件安装&#xff0c;主要有如下三种&#xff0c;“正规”程度依次递减&#xff1a; 1、使用标准的yum/apt/yast包管理程序安装 2、使用标准rpm/deb或厂商自己的安装包&#xff08;比如nVidia的显卡驱动用的bin包&#xff09;安装 …

黑*头条_第2章_文章列表前端成形与后端变身

黑*头条_第2章_文章列表前端成形与后端变身 文章目录黑*头条_第2章_文章列表前端成形与后端变身文章列表前端成形与后端变身学习目标1.前端工程结构1.1 环境准备1.1.1 导入工程1.1.2 测试运行1.2 weex 跨终端前端框架1.3 工程结构说明1.4 源码结构1.5 WEEX UI2.文章列表前端开发…

算法实验题(涉外黄成老师!!!)

日期 2022.11.19 目录 实验报告一 第一题 2 实验报告二 第二题 3 实验报告三 第三题 4 实验报告四 第四题 5 实验报告五 第五题 6 实验报告六 第六题 7 实验报告一 第一题 一、实验目的 由1&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;7&#xff0c;8这六个数字所组…

剑指 Offer II 021. 删除链表的倒数第 n 个结点【链表】

难度等级&#xff1a;中等 上一篇算法&#xff1a; 82. 删除排序链表中的重复元素 II【链表】 力扣此题地址&#xff1a; 剑指 Offer II 021. 删除链表的倒数第 n 个结点 - 力扣&#xff08;LeetCode&#xff09; 1.题目&#xff1a;删除链表的倒数第 n 个结点 给定一个链表&a…