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

【超细节】Vue3组件事件怎么声明,defineEmits与emit

目录

前言

一、基本语法

1. 子组件触发

2. 父组件监听

二、 事件参数

1. 传值

2. 接收值

三、 事件校验

四、注意事项


前言

组件事件是 Vue 组件之间进行通信的一种方式。它允许一个组件触发一个自定义事件,并且其他组件可以监听并响应这个事件。

一、基本语法

1. 子组件触发

子组件触发自定义的事件有两种方式。

  • 模板表达式中

在组件的模板表达式中,可以直接使用 $emit 方法触发自定义事件,例如:

<!-- SonCom -->
<button @click="$emit('someEvent')">click me</button>
  • <script setup> 里

显式地通过 defineEmits() 宏来声明它要触发的事件。注意,defineEmits只等在<script setup> 的顶级作用域下使用,不能在别的函数里。

科普一下:在计算机编程中,宏(Macro)通常是一种预处理指令或代码片段,用于在编译过程之前进行文本替换和代码生成。宏可以帮助简化代码编写、提高代码的复用性和可维护性。

然后使用defineEmits() 返回的跟模板里面的 $emit 相同作用的函数来触发。

<script setup>
// 声明
const emit = defineEmits(['touchFather', 'submitFather'])// 触发
function buttonClick() {emit('touchFather')
}
</script>
  • 非 <script setup> 里

事件需要通过 emits 选项来定义,emit 函数也被暴露在 setup() 的上下文对象上。

export default {emits: ['inFocus', 'submit'],setup(props, ctx) {ctx.emit('submit')}
}

2. 父组件监听

和Vue2一样,父组件可以通过 v-on (缩写为 @) 来监听事件:

<SonCom @some-event="callback" />

ps:事件名可以用驼峰形式,但是在模板中是推荐使用kebab-case 形式来编写。

二、 事件参数

如果我们需要再触发事件的时候给父组件传特定的值,就可以提供给 $emit 额外的参数。

1. 传值

  • 模板里传值
<button @click="$emit('chooseA', 1)">chooseA
</button>
  • script里传值
<script setup>
// 声明
const emit = defineEmits(['touchFather', 'submitFather'])// 触发并传值
function buttonClick() {emit('touchFather', num)
}
</script>

所有传入 $emit() 或 emit() 的额外参数都会传过去,传参不限制个数。

2. 接收值

  • 模板里接收值
<SonCom @touch-father="(num) => count = num" />
  • 方法里接收值
<SonCom @touch-father="handleNum" /><script>function handleNum(num) {count.value += num}
</script>

三、 事件校验

事件也可以像Props一样来进行校验。只需要将上面的数组换成对象。对象里事件被赋值为一个函数。接受的参数就是抛出事件时传入 emit 的内容,返回一个布尔值来表明事件是否合法。

<script setup>
const emit = defineEmits({// 没有校验touchFather: null,// 校验 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true} else {console.warn('Invalid submit event payload!')return false}}
})function submitForm(email, password) {emit('submitFather', { email, password })
}
</script>

示例:

子组件:校验并且传参不符合校验规则

<template><div><button @click="submitForm">子传父</button></div>
</template><script setup>const obj = {email: '',password: ''}const emit = defineEmits({// 没有校验touchFather: null,// 校验 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true}console.log('传参无效!')return false}})function submitForm() {emit('submitFather', obj)}
</script>

父组件:

<template><div><ChildComponent @submit-father="handle" /></div>
</template><script setup>import ChildComponent from './ChildComponent.vue'function handle({ email, password }) {console.log('父组件——', email, password)}
</script>

运行结果:

传参失败,并且Vue报错。

如果给obj值通过校验:

<template><div><button @click="submitForm">子传父</button></div>
</template><script setup>const obj = {email: 123,password: 123}const emit = defineEmits({// 没有校验touchFather: null,// 校验 submitFather 事件submitFather: ({ email, password }) => {if (email && password) {return true}console.log('传参无效!')return false}})function submitForm() {emit('submitFather', obj)}
</script>

结果:

四、注意事项

1. 组件触发的事件没有冒泡机制

2. 如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中,则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。

相关文章:

【超细节】Vue3组件事件怎么声明,defineEmits与emit

目录 前言 一、基本语法 1. 子组件触发 2. 父组件监听 二、 事件参数 1. 传值 2. 接收值 三、 事件校验 四、注意事项 前言 组件事件是 Vue 组件之间进行通信的一种方式。它允许一个组件触发一个自定义事件&#xff0c;并且其他组件可以监听并响应这个事件。 一、基本…...

java Selenium 实现简单的网页操作

官方文档&#xff1a;入门指南 | Selenium Selenium是一个用于Web应用测试的工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。 所以使用这个前端测试话工具&#xff0c;可以自动化做很多事情&#xff0c;比如自动化抓取网页内容&#xff0c;俗称网…...

(数据库系统概论|王珊)第一章绪论-第一节:数据库系统概论

目录 一&#xff1a;四大基本概念 &#xff08;1&#xff09;数据(Data) &#xff08;2&#xff09;数据库(DataBase,DB) &#xff08;3&#xff09;数据库管理系统(DataBase Management System,DBMS) &#xff08;4&#xff09;数据库系统(Database System&#xff0c;DBS…...

深入理解TCP三次握手:连接可靠性与安全风险

目录 导言TCP简介和工作原理的回顾TCP三次握手的目的和步骤TCP三次握手过程中可能出现的问题和安全风险为什么TCP三次握手是必要的&#xff1f;是否可以增加或减少三次握手的次数&#xff1f;TCP四次挥手与三次握手的异同点 导言 在网络通信中&#xff0c;TCP&#xff08;Tra…...

基于人工智能的智能矿山解决方案

什么是智能矿山&#xff1f; 智能矿山是一种运用先进技术和智能化系统来管理和监控矿山运营的概念。它利用传感器、无线通信、数据分析和人工智能等技术&#xff0c;实现对矿山内部各个环节的实时监测、自动化控制和智能决策&#xff0c;从而提高矿山的效率、安全性和可持续性。…...

vue-cli3项目优化

首先添加两个量化的插件&#xff0c;方便对项目目前的情况进行分析&#xff1a; 1.添加speed-measure-webpack-plugin插件 —量化的指标可以看出前后对比 使用步骤&#xff1a; 安装speed-measure-webpack-plugin依赖 npm install speed-measure-webpack-plugin -D配置vue.c…...

Windows环境下VSCode安装PlatformIO Cero报错ERROR: HTTP error 403 while getting

安装PlatformIO插件成功&#xff0c;初始化失败 错误信息判断问题尝试访问https://pypi.tuna.tsinghua.edu.cn/simple/platformio/成功点击文件后报错如下&#xff1a; 解决问题- 换源 &#xff08; Windows下有两个地方需要更改&#xff09;cmd命令行Pip文件 总结&#xff1a;…...

git bash 安装sdkadmin

1.下载相关安装包,复制到git 安装目录 D:\software\Git\mingw64\bin 2. 运行 curl -s "https://get.sdkman.io" | bash...

如何在IEEE论文中添加伪代码pseudocode

前言 记录写论文过程中需要重复用的一些小技巧&#xff1a; 一、如何在IEEE论文中添加伪代码pseudocode pseudocode是经常需要在论文中使用的流程图&#xff0c;掌握如何写伪代码图是必须得。 1.引入库 代码如下&#xff08;示例&#xff09;&#xff1a; # 头部添加不可少的…...

【css】css隐藏元素

display:none&#xff1a;可以隐藏元素。该元素将被隐藏&#xff0c;并且页面将显示为好像该元素不在其中。visibility:hidden&#xff1a; 可以隐藏元素。但是&#xff0c;该元素仍将占用与之前相同的空间。元素将被隐藏&#xff0c;但仍会影响布局。 代码&#xff1a; <!…...

JUC并发编程(二)ForkJoinPool、Future、CompletableFuture、CAS

文章目录 ForkJoin分治工作窃取ForkJoinPool与ThreadPoolExecutor使用案例不带返回值的计算--RecursiveAction带返回值的计算--RecursiveTask Future 异步回调烧水案例join实现FutureTask实现 CompletableFuture为什么叫CompletableFuture?创建异步任务supplyAsyncrunAsync获取…...

大数据课程F2——HIve的安装操作

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解HIve的安装概念; ⚪ 掌握HIve安装步骤和Linux常用命令; ⚪ 掌握HIve安装的连接池jar包冲突和日志打印jar包冲突; ⚪ 掌握HIve安装的Hadoop安装配置; ⚪ 掌握HIve安装的JDK安装配…...

华为云hcip核心知识笔记(存储服务规划)

云上存储 &#xff1a; 云硬盘:基于分布式架构&#xff0c;可弹性扩展的虚拟块存储服务 注意事项 挂载云硬盘实例和云硬盘必须在同一区域&#xff0c;否则挂载失败文件存储服务&#xff1a;完全托管的共享文件存储 可以为多个实例实现共享访问&#xff0c;不同vpc中可以进行对…...

四、JVM-对象内存模型

Java对象内存模型 一个Java对象在内存中包括3个部分&#xff1a;对象头、实例数据和对齐填充 数据 内存 – CPU 寄存器 -127 补码 10000001 - 11111111 32位的处理器 一次能够去处理32个二进制位 4字节的数据 64位操作系统 8字节 2的64次方的寻址空间 指针压缩技术 JDK1.6出…...

2023-08-05 LeetCode每日一题(合并两个有序链表)

2023-08-05每日一题 一、题目编号 21. 合并两个有序链表二、题目链接 点击跳转到题目位置 三、题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1&#xff1a; 示例2&#xff1a; 示例3&#xff1a; …...

【每天40分钟,我们一起用50天刷完 (剑指Offer)】第四十七天 47/50

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…...

离散型制造业生产管理云MES系统解决方案

典型的离散制造业主要包括机械、电子、航空、汽车等行业&#xff0c;这些企业既有按订单生产&#xff0c;也有按库存生产&#xff0c;既有批量生产&#xff0c;也有单件小批生产。那么&#xff0c;注重生产计划的制定&#xff0c;生产的快速响应是离散行业MES系统应用的关键。 …...

【Vue】全家桶介绍

文章目录 概述核心Vue.Js浏览器开发插件vue-devtools项目构建工具&#xff1a;vue-cli路由管理器 &#xff1a; vue-Router状态管理模式&#xff1a;vuex网络请求库&#xff1a;AxiosUI框架&#xff1a; iview、vant、elementUI打包工具&#xff1a; webpack来源 概述 Vue全家…...

【雕爷学编程】MicroPython动手做(33)——物联网之天气预报2

天气&#xff08;自然现象&#xff09; 是指某一个地区距离地表较近的大气层在短时间内的具体状态。而天气现象则是指发生在大气中的各种自然现象&#xff0c;即某瞬时内大气中各种气象要素&#xff08;如气温、气压、湿度、风、云、雾、雨、闪、雪、霜、雷、雹、霾等&#xff…...

macOS 虚拟桌面黑屏(转)

转自&#xff1a;macOS重置虚拟桌面、macOS 虚拟桌面黑屏 有几次出现如图的情况&#xff0c;以为是iTerm的问题&#xff0c;但是在关闭软件&#xff0c;重启之后&#xff0c;依旧无效。 后面经过网友告知&#xff0c;才知道是虚拟桌面的问题。 为了清理这个问题&#xff0c;有以…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...