Vue 3 进阶用法:事件的参数和校验
ztj100 2024-10-27 18:36 25 浏览 0 评论
在《Vue 3 组件入门》中，我们知道，使用 $emit(event) 抛出自定义事件，使用 @ 监听事件。
使用 defineEmits 宏定义事件列表是为了更好的智能提示。
注意一个细节，当抛出的事件名为驼峰格式（如 "someEvent"）时，监听时使用的是短横线命名格式（如 @some-event）。这与组件属性如出一辙。
另外，Vue 的自定义事件没有冒泡机制，即当一个组件抛出自定义事件时，只有它爹能听到，它爷爷听不到。
原生事件与此不同，比如当点击一个元素发出 click 原生事件后，它的所有直系长辈都能听到。
事件参数
子组件使用 $emit() 抛出事件时可以携带参数。参数跟随在事件名之后，数量不限。
父组件在回调函数中，可以按顺序接收这些参数：
事件的校验
属性可以自定义校验规则，事件也可以。
对于事件的校验，要使用 defineEmits 的对象形式。对象的键是事件名，值是事件的校验函数。根据校验是否通过，返回 true / false。
如果事件不需要校验，值设为 null 即可。
如果检验失败，会在开发者工具发现警告信息：
参考资料
- Component Events，https://vuejs.org/guide/components/events.html
完
相关推荐
- 能量空间物质相互转化途径（能量与空间转换相对论公式）
-
代码实现<!DOCTYPEhtml><htmllang="zh"><head>...
- 从零开始的Flex布局掌握（flex布局实战）
-
前言在现代网页设计中，布局是一个至关重要的环节，在过去的一段时间里，页面的布局还都是通过table...
- flex布局在css中的使用，一看就会!
-
1.认识flex布局我们在写前端页面的时候可能会遇到这样的问题：同样的一个页面在1920x1080的大屏幕中显示正常，但是在1366x768的小屏幕中却显示的非常凌乱。...
- 前端入门——弹性布局(Flex)（web前端弹性布局）
-
前言在css3Flex技术出现之前制作网页大多使用浮动（float）、定位（position）以及显示（display）来布局页面，随着互联网快速发展，移动互联网的到来，已无法满足需求，它对于那些...
- CSS Flex 容器完整指南（css flex-shrink）
-
概述CSSFlexbox是现代网页布局的强大工具。本文详细介绍用于flex容器的CSS属性：...
- Centos 7 network.service 启动失败
-
执行systemctlrestartnetwork重启网络报如下错误:Jobfornetwork.servicefailedbecausethecontrolprocessex...
- CentOS7 执行systemctl start iptables 报错:...: Unit not found.
-
#CentOS7执行systemctlstartiptables报错：Failedtostartiptables.service:Unitnotfound.在CentOS7中...
- systemd入门6:journalctl的详细介绍
-
该来的总会来的，逃是逃不掉的。话不多说，man起来：manjournalctl洋洋洒洒几百字的描述，是说journalctl是用来查询systemd日志的，这些日志都是systemd-journa...
- Linux上的Systemctl命令（systemctl命令详解）
-
LinuxSystemctl是一个系统管理守护进程、工具和库的集合，用于取代SystemV、service和chkconfig命令，初始进程主要负责控制systemd系统和服务管理器。通过Syste...
- 如何使用 systemctl 管理服务（systemctl添加服务）
-
systemd是一个服务管理器，目前已经成为Linux发行版的新标准。它使管理服务器变得更加容易。了解并利用组成systemd的工具将有助于我们更好地理解它提供的便利性。systemctl的由来...
- 内蒙古2024一分一段表(文理)（内蒙古考生2020一分一段表）
-
分数位次省份...
- 2016四川高考本科分数段人数统计，看看你有多少竞争对手
-
昨天，四川高考成绩出炉，全省共220,196人上线本科，相信每个考生都查到了自己的成绩。而我们都清楚多考1分就能多赶超数百人，那你是否知道，和你的分数一样的人全省有几个人？你知道挡在你前面的有多少人？...
- 难怪最近电脑卡爆了，微软确认Win11资源管理器严重BUG
-
近期，Win11操作系统的用户普遍遭遇到了一个令人头大的问题：电脑卡顿，CPU占用率异常增高。而出现该现象的原因竟然与微软最近的一次补丁更新有关。据报道，微软已经确认，问题源于Win11资源管...
- 微软推送Win11正式版22621.1702(KB5026372)更新
-
IT之家5月10日消息，微软今天推送了最新的Win11系统更新，21H2正式版通道推送了KB5026368补丁，版本号升至22000.1936，22H2版本推送了KB50263...
- 骗子AI换脸冒充亲戚，女子转账10万元后才发现异常……
-
“今天全靠你们，不然我这被骗的10万元肯定就石沉大海了。”7月19日，家住石马河的唐女士遭遇了“AI”换脸诈骗，幸好她报警及时，民警对其转账给骗子的钱成功进行止付。当天13时许，唐女士收到一条自称是亲...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 能量空间物质相互转化途径（能量与空间转换相对论公式）
- 从零开始的Flex布局掌握（flex布局实战）
- flex布局在css中的使用，一看就会!
- 前端入门——弹性布局(Flex)（web前端弹性布局）
- CSS Flex 容器完整指南（css flex-shrink）
- Centos 7 network.service 启动失败
- CentOS7 执行systemctl start iptables 报错:...: Unit not found.
- systemd入门6:journalctl的详细介绍
- Linux上的Systemctl命令（systemctl命令详解）
- 如何使用 systemctl 管理服务（systemctl添加服务）
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)