vue 基础-组件中事件的触发和监听

myzbx 2025-06-13 15:36 45 浏览

前言

《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 处理，以及一些特殊的事件问题做了解释说明。

关于我

一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。

关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。

点击 ↙ 了解更多，了解更多前端开发技术文章。

JS 注释

上一篇：JMH基准测试和JMH-Visual-chart可视化
下一篇：理解 wasm 基础概念（wdm的基本概念）

vue 基础-组件中事件的触发和监听

前言

事件的最佳命名方式

子组件如何发送事件

v-model 在组件上的使用

原生事件绑定修饰符 .native

事件监听 $listeners

总结

关于我

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿