Vue3之父子组件通过事件通信
前言
组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些反馈呢？就不能使用这种方式来，而是使用事件的方式，父组件通过注册这个事件的监听来接收子组件的信息，然后做对应的操作。
示例解析
在前面的章节我们使用父组件传递过来的值做一个计数组件的时候，使用v-bind的方式传值，这个时候父子组件间是单向数据流的方式，即子组件无法修改父组件传来的值，所以做计数器组件的时候，子组件只能是拷贝一份父组件传来的值，然后做计数操作，本章我们提供事件的方式实现计数的功能，思想就是，我们修改不了父组件传递过来的值，我们就可以通过事件通知父组件修改这个值：代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>父子组件通过事件进行通信</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="root"></div></body>
<script>const app = Vue.createApp({data() {return {count:1}},methods:{handleAddOne(){this.count += 1;}},template: `<div><counter :count = "count" @add-one="handleAddOne" /></div>`});app.component('counter',{props:['count'],emits:{addOne:(count) =>{if(count > 3){alert(count);return true;}return false;}},methods: {handleItemClick(){this.$emit('addOne',this.count);}},template:`<div @click="handleItemClick">{{count}}</div>`});const vm = app.mount('#root');
</script>
</html>
当我们点击显示数字的div时，会执行执行
handleItemClick方法，向父组件传递一个add-one事件，并且将目前的count值当成参数传递给父组件，父组件通过@add-one="handleAddOne"监听add-one事件，当收到这个事件后，就执行handleAddOne方法，让count的值加一，然后由于时count的值和子组件又是绑定的，所以这个值也会同步给子组件，这样就会在子组件显示count+1的值。
注意：监听事件，使用“-” 分隔符：如本例中的：@add-one，向外部发送一个事件时用驼峰命名：如本例中的：this.$emit('addOne',this.count);
从代码中我们可以看到从子组件向父组件传递一个事件使用的是$emit()方法，这个方法可以单独传事件如：this.$emit('addOne'); 也可以带参数传递：this.$emit('addOne',2);
另外本例中，我们可以看到这样一段代码：
emits:{addOne:(count) =>{if(count > 3){alert(count);return true;}return false;}},
其实这里是便于让代码的阅读者能通过emmits关键字快速知道本组件会向外传递哪些事件，毕竟组件多了后，会有一堆事件，在代码中一个个看的确比较费劲，这个模块还有一个功能就是校验我们可以在里面判断父组件传递过来的值，然后做些想做的操作
总结
本文主要介绍父组件和子组件之间的通信，父组件可以通过v-bind的方式将值传递给子组件，子组件可以使用props:[]接收，然后子组件可以通过事件$emit()通知父组件，自己想做的事情，父组件通过@事件名称的方式接收子组件的事件，这里需要注意的是，子组件发送事件时，使用的是驼峰命名，父组件定义监听时使用的是分隔符的方式命名，如此就完成了父子组件的通信。
相关文章：
Vue3之父子组件通过事件通信
前言 组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些反馈呢？就不能使用这种方式来，而是使用事件的方式&a…...
在云服务器安装tomcat和mysql
将 linux 系统安装包解压到指定目录进入 bin 目录执行./startup.sh 命令启动服务器执行./shutdown.sh 关闭服务器在浏览器中访问虚拟机中的 tomcat ip端口具体操作入下解压tomcat压缩包解压，输入tom按table键自动补全tar -zxvf 启动tomcat进入bin目录在linux启动to…...
IO多路复用（select、poll、epoll网络编程）
目录一、高级IO相关1.1 同步通信和异步通信1.2 阻塞与非阻塞1.3 fcntl 函数二、五种IO模型2.1 阻塞式IO模型2.2 非阻塞式IO模型2.3 多路复用IO模型2.4 信号驱动式IO模型2.5 异步IO模型三、认识IO多路复用四、select4.1 认识select函数4.2 select函数原型4.3 select网络编程4.4 …...
Spark单机伪分布式环境搭建、完全分布式环境搭建、Spark-on-yarn模式搭建
搭建Spark需要先配置好scala环境。三种Spark环境搭建互不关联，都是从零开始搭建。如果将文章中的配置文件修改内容复制粘贴的话，所有配置文件添加的内容后面的注释记得删除，可能会报错。保险一点删除最好。Scala环境搭建上传安装包解压并重命…...
C++网络编程(一)本地socket通信
C网络编程(一) socket通信 前言 本次内容简单描述C网络通信中，采用socket连接客户端与服务器端的方法，以及过程中所涉及的函数概要与部分函数使用细节。记录本人C网络学习的过程。 网络通信的Socket socket,即“插座”,在网络中译作中文“套接字”,应…...
【Docker】Linux下Docker安装使用与Docker-compose的安装
【Docker】的安装与启动 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sudo yum install docker-cesudo systemctl enable dockersudo systemct…...
构造函数与普通函数，显式原型与隐式原型，原型与原型链
原型与原型链1 学前先了解一些概念1.1 构造函数和普通函数的区别1.1.1 调用方式1.1.2 函数中this的指向不同1.1.3 写法不同1.2 问题明确2 原型与原型链2.1 原型2.2 显式原型与隐式原型2.3 原型链3 原型链环形结构1 学前先了解一些概念 1.1 构造函数和普通函数的区别 构造函数…...
跨过社科院与杜兰大学金融管理硕士项目入学门槛，在金融世界里追逐成为更好的自己
没有人不想自己变得更优秀，在职的我们也是一样。当我们摸爬滚打在职场闯出一条路时，庆幸的是我们没有沉浸在当下，而是继续攻读硕士学位，在社科院与杜兰大学金融管理硕士项目汲取能量，在金融世界里追逐成为更好的自己。…...
macOS 13.3 Beta 3 （22E5236f）With OpenCore 0.9.1开发版 and winPE双引导分区原版镜像
原文地址：http://www.imacosx.cn/112494.html（转载请注明出处）镜像特点完全由黑果魏叔官方制作，针对各种机型进行默认配置，让黑苹果安装不再困难。系统镜像设置为双引导分区，全面去除clover引导分区&#x…...
InceptionTime 复现
下载数据集： https://www.cs.ucr.edu/~eamonn/time_series_data/ 挂梯子，开全局模式即可 配置环境 虚拟环境基于python3.9， tensorflow下载：pip install tensorflow，不需要tensorflow-gpu（高版本python&…...
谷粒学院开发（二）：教师管理模块
前后端分离开发 前端 html, css, js, jq 主要作用：数据显示 ajax后端 controller service mapper 主要作用：返回数据或操作数据 接口 讲师管理模块（后端） 准备工作 创建数据库，创建讲师数据库表 CREATE TABLE edu…...
2021牛客OI赛前集训营-提高组（第三场） T4扑克
2021牛客OI赛前集训营-提高组（第三场） 题目大意 小A和小B在玩扑克牌游戏，规则如下： 从一副52张牌（没有大小王）的扑克牌中随机发3张到每个玩家手上，每个玩家可以任意想象另外两张牌࿰…...
【OJ比赛日历】快周末了，不来一场比赛吗？ #03.11-03.17 #12场
CompHub 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…）比赛。本账号同时会推送最新的比赛消息，欢迎关注！更多比赛信息见 CompHub主页 或 点击文末阅读原文以下信息仅供参考，以比赛官网为准目录2023-03-11&…...
C++-说一说异常机制
C异常机制是一种处理程序错误的高级方法。当程序出现错误时，可以通过抛出异常来通知调用者进行处理，或者在异常对象被捕获之后终止程序执行。 异常处理语法 在C中，可以使用 throw 抛出异常， try-catch 处理异常，try块中…...
k8s CSI插件浅析
Kubernetes CSI (Container Storage Interface)插件是一种可插拔的存储插件，可以将外部存储系统的功能集成到Kubernetes集群中。它允许Kubernetes管理员动态地将外部存储系统映射到容器中，以满足应用程序对持久化存储的需求。 CSI插件基于一组规范定义的…...
九、CSS3新特性三
文章目录一、逐帧动画二、flex弹性盒子三、少量元素侧轴对齐方式四、折行侧轴对齐方式五、项目属性六、网格布局七、网格布局的对齐方式八、网格布局的项目合并一、逐帧动画 一张背景图，改变back-position-x的位置让他动起来 step-start 逐帧动画 animation: play …...
Dynamics365 本地部署整体界面
昨天已经登陆上去了然后今天开机突然又登陆不上去了 具体原因也不知道 然后我把注册插件删除又重新下载结果还是登陆不上去于是返回之前的断点就可以登陆上去了重复昨天的操作这里就不截图了6、注册新步骤右键单击（插件）BasicPlugin.FollowUpPlugin&…...
Binder ——binder的jni注册和binder驱动
环境：Android 11源码Android 11 内核源码源码阅读器 sublime textbinder的jni方法注册zygote启动1-1、启动zygote进程zygote是由init进程通过解析init.zygote.rc文件而创建的，zygote所对应的可执行程序是app_process，所对应的源文件是app_mai…...
Python+Yolov8目标识别特征检测
Yolov8目标识别特征检测如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！前言这篇博客针对<<Yolov8目标识别特征检测>>编写代码，代码整洁，规则，易读。 学习与应用推荐…...
欢迎使用Markdown编辑器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
Qt Quick Controls模块功能及架构
Qt Quick Controls是Qt Quick的一个附加模块，提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中，这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构，与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...
【工具教程】多个条形码识别用条码内容对图片重命名，批量PDF条形码识别后用条码内容批量改名，使用教程及注意事项
一、条形码识别改名使用教程 打开软件并选择处理模式：打开软件后，根据要处理的文件类型，选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件，就选择 “PDF 识别模式”；若是处理图片文件&…...
Qt 按钮类控件（Push Button 与 Radio Button）（1）
文章目录 Push Button前提概要API接口给按钮添加图标给按钮添加快捷键 Radio ButtonAPI接口性别选择 Push Button（鼠标点击不放连续移动快捷键） Radio Button Push Button 前提概要 1. 之前文章中所提到的各种跟QWidget有关的各种属性/函数/方法&#…...