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创建一个自定义列表如何创建一个注…...
Taotoken控制台的审计日志功能如何助力团队API使用安全复盘
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken控制台的审计日志功能如何助力团队API使用安全复盘 1. 审计日志：团队API使用的全景记录 在团队协作使用大模型…...
网盘直链解析方案：如何通过浏览器脚本实现多平台文件下载优化
网盘直链解析方案：如何通过浏览器脚本实现多平台文件下载优化 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘…...
别再被EC11编码器波形坑了！STM32F103外部中断驱动避坑指南（附完整代码）
EC11编码器驱动开发实战：从硬件滤波到软件防抖的全方位避坑指南 旋转编码器作为人机交互的重要组件，在嵌入式系统中应用广泛。EC11以其性价比和可靠性成为许多项目的首选，但实际开发中，工程师常被信号抖动、方向误判等问题困扰。本…...
构建多模型容灾策略Taotoken的路由能力实战解析
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 构建多模型容灾策略：Taotoken的路由能力实战解析 应用场景类，针对对服务稳定性要求高的企业级应用…...
Python金融数据获取终极指南：3分钟掌握同花顺问财数据采集
Python金融数据获取终极指南：3分钟掌握同花顺问财数据采集 【免费下载链接】pywencai 获取同花顺问财数据 项目地址: https://gitcode.com/gh_mirrors/py/pywencai 想要快速获取同花顺问财的金融数据吗？pywencai是你需要了解的终极Python工具&…...
PRML马尔可夫链：HMM在序列预测中的终极应用指南
PRML马尔可夫链：HMM在序列预测中的终极应用指南 【免费下载链接】PRML PRML algorithms implemented in Python 项目地址: https://gitcode.com/gh_mirrors/pr/PRML PRML项目为机器学习爱好者提供了Christopher Bishop经典著作《模式识别与机器学习》的完整P…...
IDM试用期重置终极指南：告别30天限制的完整解决方案
IDM试用期重置终极指南：告别30天限制的完整解决方案 【免费下载链接】idm-trial-reset Use IDM forever without cracking 项目地址: https://gitcode.com/gh_mirrors/id/idm-trial-reset 你是否曾为Internet Download Manager（IDM）的…...
传统企业XaaS转型实战：从商业模式重构到运营模型落地
1. 云服务转型的十字路口：从“卖盒子”到“卖服务”的本质跨越在过去的十几年里，我亲眼见证了“云”从一个时髦的技术概念，演变为驱动几乎所有行业数字化转型的核心引擎。无论是初创公司还是百年老店，都在谈论上云、用云、管云。但…...
如何用 setItem 与 getItem 规范地存取本地的字符串数据
localStorage的setItem和getItem仅支持字符串，存对象需JSON序列化，取值须判null并容错解析；键名应统一前缀，敏感数据慎存，大文本需评估容量。用 setItem 和 getItem 存取本地字符串数据，核心是确保数据类型…...
【限时决策窗口】ChatGPT Plus会员购买指南：避开3个高发误区，抓住GPT-4 Turbo+文件解析+自定义GPT三重红利期
更多请点击： https://intelliparadigm.com 第一章：ChatGPT Plus会员值不值得买 ChatGPT Plus 提供每月 $20 的订阅服务，主打 GPT-4 模型访问、高优先级响应队列、文件上传解析（PDF/CSV/TXT 等）及自定义 GPTs 功能。是…...