vue中的事件

vue中的事件是什么

  • 绑定事件用v-on,简写@
  • v-on指令的参数是事件名(原生或者自定义),值是事件处理器
  • 有原生事件(click)和自定义事件(myEvent)
  • 在组件上使用原生事件,需要加native修饰符

自定义事件

  • 需要使用emit方法,emit(‘事件名’,参数)
  • 自定义事件名的规范(script中用小驼峰,模板中用短横线)
emit('eventName')
<Son @event-name="handler">
----------------------------------------------------------------
1、组合api中
setup(props, {emit}) {const clickHandler = () => {emit('xxx', data)}
}
2、setup语法糖中(非TS)
const emits = defineEmits(['xxx1', 'xxx2'])
3、setup语法糖中(使用TS)
const emit = defineEmits<{(e: 'xxx1', msg: String): void,(e: 'xxx2', num: Number): void,
}>()
emit('xxx1', 'jim')

事件处理器中的参数

  • 原生事件的事件处理器中的参数
// 方法事件处理器没有显示的传\$event,但在方法中仍然可以获取事件对象
<div @click="handler">
handler(e) {// e为事件对象
}
// 内联事件处理器中,如果方法要额外传参数,需要显示写出\$event(表明这个参数的位置,便于区分参数)
<div @click="handler($event, 123)">
handler(e, msg) {// e为事件对象,msg是123
}
  • 自定义事件的事件处理器中的参数
// 方法事件处理器没有显示的传\$event,但在方法中仍然可以获取自定义事件传递的参数
<div @eventName="handler">
handler(eventData) {// eventData为自定义事件传递的参数
}
// 内联事件处理器中,如果方法要额外传参数,需要显示写出\$event(表明这个参数的位置,便于区分参数)
<Son @eventName="handler(123, $event)" />
handler(msg, eventData) {// msg是123,eventData为自定义事件传递的参数
}

on和emit的实现

o n 、 on、 onemit是基于订阅观察者模式的,维护一个事件中心,on的时候将事件按名称存在事件中心里,称之为订阅者,然后emit将对应的事件进行发布,去执行事件中心里的对应的监听器

1、vue先创建一个构造器,维护一个事件中心events
function EventEmiter(){this.events = {}
}
2、$on
EventEmiter.prototype.on = function(event,cb){if(this.events[event]){this.events[event].push(cb)}else{this.events[event] = [cb]}
}
3、$emit
EventEmiter.prototype.emit = function(event){let args = Array.from(arguments).slice(1)let cbs = this.events[event]if(cbs){cbs.forEach(cb=>{cb.apply(this,args)})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/13773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

worklist配置调试日志记录

工作记录用,不拘小节&#xff01; 设备请求日志 2024-05-23 09:03:14,503 [WorkListServer: 10.87.232.253 [18]] INFO - LISTMWL Request from [gehc]: (0008,0005) CS [ISO_IR 100] # 10 Specific Character Set 1-N (0008,0020) DA [] …

用python做的一个登录界面——浔川python社

以下代码是一个基于Tkinter的简单的登录注册界面。 代码的功能如下&#xff1a; 导入tkinter模块&#xff0c;并重命名为tk。 创建一个窗口对象window&#xff0c;并设置标题和大小。 创建一个随机的四位数作为验证码&#xff0c;并将其显示在窗口中。 创建用户名、密码和验…

如何搭建一个vue项目(完整步骤)

搭建一个新的vue项目 一、安装node环境二、搭建vue项目环境1、全局安装vue-cli2、进入你的项目目录&#xff0c;创建一个基于 webpack 模板的新项目3、进入项目&#xff1a;cd vue-demo&#xff0c;安装依赖4、npm run dev&#xff0c;启动项目 三、vue项目目录讲解四、开始我们…

go 爬虫之 colly 简单示例

1. 背景 colly 是 Go 实现的比较有名的一款爬虫框架&#xff0c;而且 Go 在高并发和分布式场景的优势也正是爬虫技术所需要的。它的主要特点是轻量、快速&#xff0c;设计非常优雅&#xff0c;并且分布式的支持也非常简单&#xff0c;易于扩展。 2. 官方文档 https://go-col…

RPC原理技术

RPC原理技术 背景介绍起源组件实现工作原理 背景 本文内容大多基于网上其他参考文章及资料整理后所得&#xff0c;并非原创&#xff0c;目的是为了需要时方便查看。 介绍 RPC&#xff0c;Remote Procedure Call&#xff0c;远程过程调用&#xff0c;允许像调用本地方法一样调…

Java 如何使用aws的kinesis实现消费端,消费流中数据

1.前言 AWS 官网给了两种方式实现: java 1.x java 2.x 这两种方式,包是不一样的,1.x是com.amazonaws,2是software.amazon.kinesis 使用也是天差地别,而且国内对kinesis这个资料简直少的可怜,这也就增加了开发难度, 2.什么是kinesis 我说一下kinesis是啥吧,其实和咱们队…

spring jpa 公共字段设计

数据库公共字段 1、多租户 tenantId 2、创建者名字 createName 3、创建者时间 createTime 4、更新者名字 updateName 5、更新者时间 updateTime 基础model类 /*** 基础Model*/ Data MappedSuperclass public class BaseModel implements Serializable{IdGeneratedValue(stra…

Linux DAY 6 _systemctl

systemctl命令&#xff0c;通过这个命令控制系统操作 语法&#xff1a;systemctl start | stop | status | enable | disable 服务名 start 启动 stop 关闭 status 查看状态 enable 开启开机自启 disable 关闭开机自启 服务名&#xff1a; NetworkManager 主网络服务 net…

源网络地址转换SNAT

左上角的是访问互联网发送的数据包&#xff0c;第一个是访问&#xff0c;第二个是网页传回来的 3、4项是源端口号和目的端口号&#xff08;3是随机的&#xff08;1024-65535&#xff09;&#xff0c;那个是http的网页服务端口就是80&#xff09; 那么往回传数据的时候源和目的…

解决uniapp中的web-view页面进入时全屏问题

当我们在使用uniapp开发应用的时候&#xff0c;我们使用web-view进行外部页面的引入 在h5 浏览器下显示正常&#xff0c;我通过样式控制&#xff0c;上面是web-view&#xff0c;下面是菜单栏。 但是在 app调试或真机上&#xff0c;无论如何&#xff0c;web-view都占满全屏&…

0.零基础入门微服务实战课

0.零基础入门微服务实战课 1.微服务和 Spring Cloud1.1 什么是微服务&#xff1f;1.2 什么是 Spring Cloud&#xff1f;1.3 微服务 VS Spring Cloud 2.为什么要学微服务&#xff1f;3.Spring Cloud 组件介绍 1.微服务和 Spring Cloud 1.1 什么是微服务&#xff1f; 微服务是将…

【Leetcode 每日一题】28. 找出字符串中第一个匹配项的下标

给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack &qu…

DFE_offset失调校准

1.校准原因 *制造工艺的限制&#xff1a;晶体管在制造过程中&#xff0c;由于工艺的限制&#xff0c;不可能做到完全对称&#xff0c;这导致了输入级晶体管的性能存在微小的差异。 *输入级偏置电流的不对称&#xff1a;输入级晶体管的偏置电流也会存在差异&#xff0c;这也会…

H4vdo 台湾APT-27视频投放工具

地址:https://github.com/MartinxMax/H4vdo 视频 关于 H4vdo RTMP lock 屏播放视频工具&#xff0c;可以向目标发送有效载荷&#xff0c;播放目标的屏幕内容。目标无法曹作计算机 使用方法 安装依赖 根据你的操作系统选择一个安装程序 RTMP 服务端 ./rtsp-simple-server.…

npm run dev启动element-ui,提示node_modules中webpack的版本跟package.json中webpack的版本不一致

问题一&#xff1a;修改node_modules/webpack/package.json版本为4.14.0&#xff0c;npm run dev时版本号又自动更改为 4.47.0 问题二&#xff1a;使用yarn 安装依赖&#xff0c;webpack的版本默认是4.47.0&#xff0c;为什么 求大佬们帮我解答一下以上两个问题 左侧是node_m…

【退役重学Java】关于 Sentinel 与服务熔断熔断

一、Sentinel 分布式系统的流量防卫兵 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度 二、服务熔断 是什么&#xff1a; 服务熔断是一种微服务架构中的容错机制&#…

数据中心大型AI模型网络需求

数据中心大型AI模型网络需求 随着Transformer的崛起和2023年ChatGPT的大规模应用&#xff0c;业界逐渐形成共识&#xff1a;遵循一定的规模效应原则&#xff0c;增加模型参数量能够显著提升模型性能。特别是在参数数量级跃升至数百亿乃至更高时&#xff0c;大型AI模型在语言理…

【C++】 类型转换的详细讲解

前言 本章我们将学习C里面的几种类型转换。如&#xff1a; static_cast、reinterpret_cast、const_cast、dynamic_cast。 这些都是操作符关键字。 目录 1. C的类型转换1.1 C语言的类型转换&#xff1a;1.2 为什么C需要四种类型转换&#xff1a;1.3 C强制类型转换&#xff1a;1.…

知识分享|非凸问题求解方法及代码示例【分类迭代】【大M法】

主要内容 之前发布了非线性问题线性化的几种方法&#xff0c;如知识分享|分段函数线性化及matlab测试&#xff0c;学习园地 | yalmip实用操作-线性化&#xff0c;非线性优化 | 非线性问题matlabyalmip求解案例&#xff0c;但是在实际建模及编程过程中&#xff0c;会遇到各种…

记录一个更新adobe软件导致加载PDF文件异常的问题

最近由于项目需要,没有办法把原有的adobe正版软件进行了卸载,换了个盗版软件,结果导致我的pdf文件加载的时候出现异常。 报错的语句是这个 string str = System.Environment.CurrentDirectory; // string fileName = MyOpenFileDialog(); axAcroPDF1.LoadFile(…