当前位置: 首页 > news >正文

不同组件之间相互传递信息的方式(拓展知识)

文章目录

  • 🐒个人主页
  • 🏅JavaEE系列专栏
    • 📖前言:
    • 🏨补充知识:不同组件之间通过get()方式传递信息
  • 🎀父组件与子组件之间的信息交互 $emit 方法
    • 🏅父组件给子组件发信息(这个是官方的案例)(原理是事件监听)
    • 🏅子组件给父组件发信息(个人案例)

🐒个人主页

🏅JavaEE系列专栏

📖前言:

本篇博客主要以介绍不同组件之间如何传递信息的,传递方式包括get()方式(需要跳转)父子组件之间相互的传递:、其实还有一种是基于主线程来传递的(我没有接触到🐒)

🏨补充知识:不同组件之间通过get()方式传递信息

传递信息的组件

this.$router.push("/?account="+this.form.account);

接收信息的组件

mounted() {//一般情况下在页面加载时就接收信息,所以一般在mounted的方法中写this.form.account=this.$route.query.account;}

🎀父组件与子组件之间的信息交互 $emit 方法

应用场景:我们可能会遇到这种情景:当一个子组件完成任务时,我们想让父组件执行一些指令,这时就需要子组件向父组件发送信息,让父组件去执行对应的指令。

🏅父组件给子组件发信息(这个是官方的案例)(原理是事件监听)

🎀🎀🎀🎀🎀🎀这个是父组件里的内容🎀🎀🎀🎀🎀🎀🎀🎀🎀

<template><div><button @click="sendData">Send Data</button><child-component @custom-event="handleCustomEvent"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {sendData() {const data = { name: 'Hello from parent component!' };//这里是准备给子组件传递的信息this.$emit('custom-event', data); // 触发自定义事件,发送信息}},
};
</script>

🎀🎀🎀🎀🎀🎀这个是子组件里的内容🎀🎀🎀🎀🎀🎀🎀🎀🎀
在子组件中监听这个自定义事件,并在回调函数中执行相应的逻辑。例如:

<!-- ChildComponent.vue -->
<template><div><button @click="updateParentData">Update Parent Data</button></div>
</template><script>
export default {methods: {updateParentData() {const newData = { name: 'Hello from child component!' };//这里是接收父组件传递的信息的容器this.$emit('update-parent-data', newData); // 触发自定义事件,并接收新数据对象}}
};
</script>

以下是:子组件给父组件传递信息

🏅子组件给父组件发信息(个人案例)

🎀🎀🎀🎀🎀🎀这个是子组件里的内容🎀🎀🎀🎀🎀🎀🎀🎀🎀

<template><div><el-button type="primary" @click="addSudent()">保 存</el-button></div>
</template>
<script>
export default {methods: {addSudent(){//向父组件Stulist发送更新请求🎀🎀🎀🎀🎀🎀🎀🎀const data = true;//子组件向父组件发送的信息this.$emit('Add-event', data); // 触发自定义Add-event响应事件}}
}						
</script>

🎀🎀🎀🎀🎀🎀这个是父组件里的内容🎀🎀🎀🎀🎀🎀🎀🎀🎀

<template><div><Add ref="add" @Add-event="add"></Add><!-- 这个是导入的组件标签,@Add-event是响应事件 --></div>
</template><script>
import Add from './Add.vue';
export default {components:{Add},methods: {add(data){//🎀🎀🎀🎀🎀🎀if(data==true){//组件信息交互--🎀🎀🎀🎀🎀🎀🎀🎀// 在此处执行向后端发送 get 请求的逻辑,更新表格//这里写需要父组件执行的指令}}}
}	
</script>

相关文章:

不同组件之间相互传递信息的方式(拓展知识)

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f3e8;补充知识&#xff1a;不同组件之间通过get&#xff08;&#xff09;方式传递信息 &#x1f380;父组件与子组件之间的信息交互 $emit 方法&#x1f3c5;父组件给子组件发…...

idea找不到DataBase

一、我想把数据库跟我的idea链接&#xff0c;结果发现找不到。如图。 二、解决方案 找到 file ---setting 找到plugin------找到marketplace 我的已经出现了...

研发工程师玩转Kubernetes——PVC使用Label和storage选择PV

在《研发工程师玩转Kubernetes——local型PV和PVC绑定过程中的状态变化》和《研发工程师玩转Kubernetes——使用local型PV在不同Pod上共享数据》中&#xff0c;我们介绍了指定VPC的spec.volumeName为PV名称来绑定它们的方法。本文将介绍PVC在创建时&#xff0c;系统自动选择绑定…...

【VUE】localStorage、indexedDB跨域数据操作实战笔记

由于业务需求&#xff0c;最近研究localStorage、indexedDB等如何跨域进行CRUD管理&#xff0c;经过一番研究&#xff0c;封装了如下代码并做个笔记 环境 vue: ^3.3.4 实战 发送端(即触发站点) 在App.vue中引入CrossDomainStorage组件(后面有实现过程) <script setup&g…...

四、web应用程序技术——HTTP

文章目录 1 HTTP请求2 HTTP响应3 HTTP方法4 URL5 HTTP消息头5.1 常用消息头5.2 请求消息头5.3 响应消息头 6 cookie7 状态码8 HTTP代理9 HTTP身份验证 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是访问万维网使用的核心通信协议&…...

B2B2C小程序商城系统--跨境电商后台数据采集功能开发

搭建一个B2B2C小程序商城系统涉及到多个步骤和功能开发&#xff0c;其中包括跨境电商后台数据采集功能的开发。具体搭建步骤如下&#xff1a; 一、系统搭建 1. 确定需求和功能&#xff1a;根据B2B2C商城的需求&#xff0c;确定系统的功能和模块&#xff0c;包括商品管理、订单…...

Python-OpenCV中的图像处理-形态学转换

Python-OpenCV中的图像处理-形态学转换 形态学转换腐蚀膨胀开运算闭运算形态学梯度礼帽黑帽形态学操作之间的关系 形态学代码例程 形态学转换 形态学操作:腐蚀&#xff0c;膨胀&#xff0c;开运算&#xff0c;闭运算&#xff0c;形态学梯度&#xff0c;礼帽&#xff0c;黑帽等…...

理解 Python 的 for 循环

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 在本篇博客中&#xff0c;我们将讨论 Python 中 for 循环的原理。 我们将从一组基本例子和它的语法开始&#xff0c;还将讨论与 for 循环关联的 else 代码块的用处。 然后我们将介绍迭代对象、迭代器和迭代器协议&…...

携程验证码

今日话题&#xff1a;凑字数水文章。大表哥们感兴趣可以看看。 携程验证类型总共有3种。无感&#xff0c;滑块&#xff0c;点选。 process_type&#xff1a;None为无感 验证接口&#xff1a;https://ic.ctrip.com/captcha/v4/risk_inspect process_type&#xff1a;JIGSAW为…...

资深媒体人宋繁银加入《数据猿》任总编辑,全面负责公司整体内容工作

大数据产业创新服务媒体 ——聚焦数据 改变商业 2023年7月北京&#xff0c;《数据猿》宣布正式任命宋繁银为总编辑&#xff0c;全面负责公司整体内容工作。此次重要的人事任命标志着《数据猿》的发展迈上了一个新的台阶&#xff0c;对于《数据猿》团队而言&#xff0c;不仅是一…...

【Unity实战100例】人物状态栏UI数据刷新—MVC观察者模式

目录 一.创建Model层数据模型 二.创建View层关联UI组件 三.创建Controller层使得V和M数据关联 源码:htt...

8路AD采集FMC子卡【产品资料】

FMC148是一款基于VITA57.4标准的JESD204B接口FMC子卡模块&#xff0c;该模块可以实现8路14-bit、500MSPS/1GSPS/1.25GSPS ADC采集功能。该板卡ADC器件采用ADI公司的AD9680芯片,全功率-3dB模拟输入带宽可达2GHz。该ADC与FPGA的主机接口通过16通道的高速串行GTX收发器进行互联。 …...

文章三:团队协作实践 - 协作高手:Git团队开发最佳实践

开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun 概述 在现代软件开发中&#xff0c;团队协作是必不可少的环节。而Git作为目前最受欢迎的分布式版本控制系统&a…...

Pyinstaller 打包 django 项目如何将命令行参数加入?

起因 Pyinstaller 打包 django 项目&#xff0c;打包成 manage.exe 后用命令行 cmd manage.exe 0.0.0.0:8001 --noreload 感觉很不方便。 希望能够直接把命令行参数也打包进去。 我是这样做的&#xff1a; 步骤 1.新建 main.py 文件 import osos.system(manage.exe runser…...

hive锁的管理器的介绍

各个管理器的使用&#xff1a; org.apache.hadoop.hive.gl.lockmgr.DbTxnManager 在 Hive 中被用于实现事务和锁的管理机制。它的使用场景通常涉及以下情况&#xff1a; ACID事务支持&#xff1a;当需要在 Hive 中进行复杂的数据操作&#xff0c;并确保这些操作以原子性、一致…...

以太网TCP协议(十二)

目录 一、概述 二、功能 2.1 连接管理 2.2 响应与序列号 2.3 超时重发 2.4 传输单位&#xff1a;段 2.5 窗口控制 2.6 流控制 2.7 拥塞控制 2.8 效率提高 三、报文格式 一、概述 TCP作为一种面向有连接的协议&#xff0c;只有在确认通信对端存在时才会发送数据&…...

ARM 架构下的汇编指令(持续更新中)

ARM 架构下的汇编指令 1. 预取指令1.1. pldw1.2. pld1.3. 使用场景 2. ldrex3. teq4. 条件分支指令4.1. beq4.2. bne 1. 预取指令 1.1. pldw pldw 是 “Prefetch Load Data for Write” 的缩写&#xff0c;pldw 指令用于预取写操作&#xff0c;它告诉处理器需要预先加载指定地…...

11款UML/SysML建模工具更新(2023.7)Papyrus、UModel……

DDD领域驱动设计批评文集 欢迎加入“软件方法建模师”群 《软件方法》各章合集 最近一段时间更新的工具有&#xff1a; 工具最新版本&#xff1a;drawio-desktop 21.6.5 更新时间&#xff1a;2023年7月22日 工具简介 开源绘图工具&#xff0c;用Electron编写&#xff0c;…...

FPGA外部触发信号毛刺产生及滤波

1、背景 最近在某个项目中&#xff0c;遇到输入给FPGA管脚的外部触发信号因为有毛刺产生&#xff0c;导致FPGA接收到的外部触发信号数量多于实际值。比如&#xff1a;用某个信号源产生1000个外部触发信号&#xff08;上升沿触发方式&#xff09;给到FPGA输入IO&#xff0c;实际…...

day38 滑动窗口

1. 滑动窗口 应用场景&#xff1a; 满足xxx条件&#xff08;计算结果、出现次数、同时包含&#xff09; 关键词&#xff1a;最长最短子串无重复等等 1&#xff09;最长 左右指针在起始点&#xff0c;R 向右依次滑动循环&#xff1b; 如果&#xff1a; 窗内元素满足条件&#x…...

用可逆数据结构实现 Harness 的无损回滚

用可逆数据结构实现 Harness 的无损回滚 1. 引入与连接:在复杂部署系统中寻找安全网 1.1 一个运维工程师的不眠之夜 2023年某个周五的晚上,9点37分,电商平台"SmoothShop"的CI/CD负责人张磊正准备关机下班,期待着即将到来的周末。突然,监控系统的警报声响彻整…...

AI基础设施权力更迭:AWS Bedrock 凭什么在 2026 年让开发者集体“倒戈”?

声明&#xff1a;本文由AI编辑生成&#xff0c;内容仅供参考。文中涉及的行业判断、平台能力分析、商业趋势推演与产品价值描述&#xff0c;均基于公开资料、通用观察及示意性表达整理&#xff0c;不构成任何商业承诺、采购建议、投资建议或服务保证。实际产品能力、接口支持范…...

Programmable-Air开源气动控制库底层驱动解析

1. Programmable-Air 开源控制库深度解析&#xff1a;面向嵌入式工程师的底层驱动实践指南Programmable-Air 是一款基于 Crowdfunding 平台 CrowdSupply 成功孵化的开源气动控制硬件平台&#xff0c;其核心价值在于将传统工业级气动执行器&#xff08;泵、阀、压力传感器&#…...

Vue-color源码架构分析:理解组件化设计思想

Vue-color源码架构分析&#xff1a;理解组件化设计思想 【免费下载链接】vue-color :art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh 项目地址: https://gitcode.com/gh_mirrors/vu/vue-color Vue-color是一个基于Vue.js的…...

探索黑苹果实战:零基础打造你的专属 macOS 系统

探索黑苹果实战&#xff1a;零基础打造你的专属 macOS 系统 【免费下载链接】Hackintosh 国光的黑苹果安装教程&#xff1a;手把手教你配置 OpenCore 项目地址: https://gitcode.com/gh_mirrors/hac/Hackintosh 核心价值&#xff1a;为什么选择开源黑苹果项目 你是否曾…...

转行网安别死磕技术!合规才是企业刚需,运维转更易上岸

很多运维转行网安时&#xff0c;只关注 “技术攻击与防御”&#xff08;如渗透测试、漏洞挖掘&#xff09;&#xff0c;却忽视了 “合规知识”—— 而合规是企业安全的 “底线要求”&#xff0c;也是网安岗位的 “刚需技能”。随着《网络安全法》《数据安全法》《个人信息保护法…...

数据中心母线槽选型指南——面向数据中心配电场景的智能母线系统

引言在数据中心供配电系统中&#xff0c;母线槽作为电力传输的关键基础设施&#xff0c;承担着将电力从变配电设备输送至各类用电设备的重要职责。随着数据中心规模扩大与供电可靠性要求提升&#xff0c;传统电缆方案在维护、监测与扩展性方面的局限日益凸显。成都高标电气有限…...

ROS2核心概念与架构详解:从零开始机器人操作系统(1)

一、顶级架构一句话总结节点 → DDS通信 → 话题/服务/动作 → 参数 → 工具链 → 机器人应用ROS2&#xff08;Robot Operating System 2&#xff09;是新一代开源机器人操作系统&#xff0c;采用DDS作为通信中间件&#xff0c;去掉了ROS1的Master节点&#xff0c;提供更好的实…...

为什么92%的农业SaaS平台在PHP可视化环节失败?资深农科院IT总监深度复盘3大技术黑洞

第一章&#xff1a;农业SaaS平台PHP可视化失败的全局图谱农业SaaS平台在落地过程中&#xff0c;常将数据可视化模块交由PHP后端直接渲染图表&#xff0c;却普遍遭遇响应延迟、内存溢出、图表错位及跨设备兼容性断裂等系统性失败。这些失败并非孤立缺陷&#xff0c;而是技术选型…...

英国人正在减少社交媒体发帖,网络态度趋于保守

英国成年人在社交媒体上的活跃度持续下滑。据英国电信监管机构Ofcom最新数据显示&#xff0c;目前仅有一半用户会主动发布内容&#xff0c;且认为上网利大于弊的人数也在减少。Ofcom对一批成年人的媒体使用情况及态度进行了调查&#xff0c;结果发现&#xff0c;主动在社交媒体…...