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创建一个自定义列表如何创建一个注…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目（父项目）主要用于依赖管理 一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存 默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存 一级缓存（本地缓存&#…...
Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...
CTF show 数学不及格
拿到题目先查一下壳，看一下信息 发现是一个ELF文件，64位的 用IDA Pro 64 打开这个文件 然后点击F5进行伪代码转换 可以看到有五个if判断，第一个argc ! 5这个判断并没有起太大作用，主要是下面四个if判断 根据题目…...