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创建一个自定义列表如何创建一个注…...
2026数字化能力自测表：你的技能树点亮了几颗？
很多人求职碰壁、工作吃力、升职缓慢，根本原因不是不够努力，而是个人技能树跟不上2026年的数字化职场标准。当下职场早已不再只看专业成绩、纸面学历，数字化适配能力已经成为新人入职、职场晋升的隐形门槛。但大部分人对自己的能力认知是模糊…...
激光器核心光路解析：单模与多模光纤的选型、耦合与系统设计实战
1. 光纤基础：从全反射到模式传输 第一次接触光纤时，我被那根比头发还细的玻璃丝能传光的现象震撼到了。后来才知道，这背后的核心原理是全内反射——当光从高折射率介质（纤芯）射向低折射率介质（包层…...
第三方令牌泄露引发的供应链数据泄露治理研究 —— 以 Zara 事件为例
摘要 2026 年 4 月，黑客组织 ShinyHunters 通过入侵云分析服务商 Anodot 并窃取其身份认证令牌，非法访问下游多家企业云数据平台，导致快时尚品牌 Zara 近 19.7 万名用户信息泄露，泄露字段含电子邮箱、订单 ID、商品 SKU 及客服工单…...
有话直说可以解决90%的误解的庖丁解牛
它的本质是：将高维度的、模糊的、充满噪声的 心理潜台词 (Subtext/Implicit Context)，强制降维并编码为低维度的、精确的、无歧义的 显性语言 (Explicit Language)。这是一种 去序列化 (Deserialization) 的过程，旨在消除接收端因“猜测”、“…...
OneFileLLM：自动化多源信息聚合工具，提升LLM工作效率
1. 项目概述与核心价值如果你经常和大型语言模型打交道，无论是做研究、写代码还是分析文档，最头疼的事情之一可能就是“喂料”。你需要把分散在本地文件、GitHub仓库、网页、PDF论文甚至YouTube视频里的信息，一股脑儿地塞给LLM，让…...
jquery-confirm在真实项目中的应用：电商、后台管理、表单验证等场景实战
jquery-confirm在真实项目中的应用：电商、后台管理、表单验证等场景实战 【免费下载链接】jquery-confirm A multipurpose plugin for alert, confirm & dialog, with extended features. 项目地址: https://gitcode.com/gh_mirrors/jq/jquery-confirm j…...
【信息科学与工程学】【通信工程】第六篇02 5G-A6G 智能超表面
一、智能超表面 1.1 智能超表面基础 智能超表面（RIS）是一项前沿技术，它让我们能够像“指挥”光一样，去灵活地操控看不见的电磁波，从而构建一个智能、高效的无线环境。 理解维度 核心内容 关键点 它是什么？（核心特征） 一种可编程的二维人工电磁表面 由大量超材…...
SpringBoot+Vue Spring Boot可盈保险合同管理系统管理平台源码【适合毕设/课设/学习】Java+MySQL
系统架构设计### 摘要 随着保险行业的快速发展，传统的手工管理模式已无法满足现代保险业务的高效需求。保险合同管理系统作为保险业务的核心支撑，亟需通过信息化手段提升管理效率，降低人工操作错误率。当前市场上许多保险公司的合同管理仍依赖…...
AI编程助手Code-Buddy：本地优先、插件化架构与工程实践全解析
1. 项目概述：一个为开发者量身打造的智能代码伙伴 最近在逛GitHub的时候，发现了一个挺有意思的项目，叫 runkids/code-buddy 。光看名字，“代码伙伴”，就让人感觉这应该是个能帮我们写代码、解决开发问题的工具。点进…...
利用Taotoken快速为不同编程语言生成AI调用示例
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 利用Taotoken快速为不同编程语言生成AI调用示例 在构建现代应用时，全栈开发者常常需要在前端、后端、CLI工具等多个技术…...