vue 基础-组件中事件的触发和监听
myzbx 2025-06-13 15:36 12 浏览
前言
《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）
vue 中单纯的事件调用，你一定不陌生，简单的写一个 v-on:click=foo() 就可以触发。但组件事件的交互方式可能会遇到些小困难，相信第一次写时一定被事件命名到底驼峰（camelCase）还是短横杠（kebab-case）方式所困惑。
这篇以事件命名展开，讲下组件的事件机制。
事件的最佳命名方式
首先你要明确对事件命名需要使用哪种方式？
它和 props 命名类似，但有不同。props 即使你驼峰命名，模板上也可以通过短横杠方式定义传值的。
先看下驼峰命名方式：
程序如预期执行。但是你要知道可能一时的手误没有大写，或者因为 html 对大小写不敏感，导致事件发送不出去。
这里建议还是统一使用“短横杠”命名方式。这也是官网推荐的。
子组件如何发送事件
使用内置的 this.$emit 方法，代码如下：
v-model 在组件上的使用
应该知道 v-model 是一个语法糖，它包含了数据的绑定和事件的定义。
来看下一个简单的子组件包含 input 元素的实现：
prop 会用一个默认的 value 来接收父组件中 v-model 传来的值，并且 input 事件会随着用户输入触发而发送出去：
父组件定义：
这就是表单 form 中 input 元素上使用 v-model 的简单例子。
非 input 事件
因为 v-model 默认是接收 input 事件的，其他表单事件如何处理？
需要在子组件中特殊指定 model ，来告诉父组件我是 change 的事件：
原生事件绑定修饰符 .native
当我们的子组件，就是一个 input 标签时，父组件尝试绑定 focus 聚焦事件时，却是无反应的。
这时可以通过 .native 修饰符来获取原生事件
但如果子组件是个复杂的 form 表单，或者外面包裹了一层其他标签，即使 .native 也无法子了。
事件监听 $listeners
上面这种情况怎么办呢？这时候就需要使用 $listeners 来放大招了。
vue 专门提供了 this.$listeners 来获取父组件写的事件监听器。来应对上例失效的情况：
上图中注释已经可以说明问题了。我在针对其中细节补充下：
- 通过自带的 $attrs 来获取父组件模板中额外定义的属性，如，type=text
- 定义计算属性 inputListeners 返回一个事件监听对象。这个对象以 this.$listeners 为基础可以扩展我们自定义的事件方法。（如上图，定义了 input 以用来使得父模板定义的 v-model 的正常工作）
总结
从组件事件展开，讲了组件上事件的命名方式，同时针对日常编程中常见的 v-model 处理，以及一些特殊的事件问题做了解释说明。
关于我
一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。
关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。
点击 ↙ 了解更多，了解更多前端开发技术文章。
相关推荐
- 怎么恢复7z文件 7z文件删除了怎么恢复
-
7z是一种压缩格式的文件，它运用LZMA压缩算法，该压缩算法的输出稍后被算数编码进行处理以便后续进一步压缩，压缩比十分高。我们可以将文件压缩成这种格式，便于传输，保存，占空间少。了解更多7z文件知识...
- 郎酒让消费者喝得明明白白 算术题里有答案
-
日前，『郎酒酱香产品企业内控准则』颁布，郎酒首次公开酱香产品生产全过程，公布酱香产品产能、储能及投放计划。随后，郎酒官微向消费者发出「品控算术题」有奖问答。郎酒亮出家底，消费者踊跃留言。8天后，谜底揭...
- 学龄前，比识字、算术更重要的是这三件事
-
“为了给孩子选择一家合适的幼儿园，我曾穿梭于纽约各家幼儿园的开放日，这些幼儿员既包括主流的公立幼儿园，还包括那些遥不可及的私人幼儿园。我的目的就是想了解他们的教育理念是什么，到底厉害在哪里，看看对于我...
- 参加CSP-J信奥赛需要掌握数学知识
-
在C++语法的学习中需要储备的数学知识如下①数据类型：需要知道整数、正整数、负整数、小数、判断对错②算术运算符：加法、减法、乘法、除法、取模运算③关系表达式：大于、大于等于、小于、小...
- 1g米饭能做多少深蹲?今天我们来算一算
-
减重我们都知道3分在练，7分在吃，吃这件事情上，真的是每一口都算数。今天我们来算一笔账，1粒米饭可以做多少事情？本着认真负责的态度，今天在食物秤上称了1g米饭，是16粒。根据能量换算：100g米饭是4...
- web 自动化测试，一定得掌握的 8 个核心知识点
-
使用cypress进行端对端测试，和其他的一些框架有一个显著不同的地方，它使用JavaScript作为编程语言。传统主流的selenium框架是支持多语言的，大多数QA会的pytho...
- 大话C语言:赋值运算符（c语言中赋值运算符是什么）
-
赋值运算符是最基本的运算符之一，用于将右侧的值或表达式的计算结果赋给左侧的变量。它是一个二元运算符，意味着它需要两个操作数：一个是目标变量（左侧），另一个是要赋给该变量的值或表达式（右侧）。赋值运算符...
- Vue进阶(幺幺伍):js 将字符串转换为boolean
-
Boolean();参数为0、null和无参数返回false，有参数返回true。Boolean("");//输出为：falseBoolean(null);//输出为...
- mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)
-
1).大于，小于，大于或等于，小于或等于$gt:大于$lt:小于$gte:大于或等于$lte:小于或等于例子：db.collection.find({"field":{$gt:valu...
- Python学不会来打我(21)python表达式知识点汇总
-
在Python中，表达式是由变量、运算符、函数调用等组合而成的语句，用于产生值或执行特定操作。以下是对Python中常见表达式的详细讲解：1.1算术表达式涉及数学运算的表达式。例如：a=5b...
- C|数据存储地址与字节偏移、数据索引
-
话说C是面向内存的编程语言。数据要能存得进去，取得出来，且要考虑效率。不管是顺序存储还是链式存储，其寻址方式总是很重要。顺序存储是连续存储。同质结构的数组通过其索引表示位置偏移，异质结构的结构体通过其...
- 下班后累懵?4 个 JS 手写题帮你搞定前端面试高频考点
-
打工人下班后最痛苦的事，莫过于拖着疲惫的身子还要啃前端面试题吧？看着那些密密麻麻的JS代码，脑子都快转不动了！别担心，今天咱就用轻松的方式，带你吃透4道高频手写题，让你在面试时自信满满，再也不...
- 嵌入式数据库sqlite3【进阶篇】-子句和函数的使用，小白一文入门
-
sqlite在《嵌入式数据库sqlite3命令操作基础篇-增删改查，小白一文入门》一文中讲解了如何实现sqlite3的基本操作增删改查，本文介绍一些其他复杂一点的操作。比如where、orderby...
- 前缀表达式与后缀表达式（前缀表达式后缀表达式中缀表达式计算）
-
昨天晚上和儿子一起学习了前缀表达式和后缀表达式。这应该是字符串算式如何被计算机识别并计算的2种方法。本来是想先给他讲一个逆波兰式（后缀表达式），以后再讲前缀表达式。没想到他还挺聪明，很快就把2个都掌握...
- Python快速入门教程1:基本语法、数据类型、运算符、数字字符串
-
Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、运算符、数字和字符串等内容，并附有使用实例场景。Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)