Vue 渲染器对自定义事件的处理机制-Vue.js-PHP中文网

vue渲染器不直接处理自定义事件，而是将render中on字段声明的事件（如'on: { update: handler }'）保留在vnode listeners中，供子组件调用$emit时查找并触发对应处理函数。

vue 渲染器对自定义事件的处理机制

Vue 渲染器本身不直接“处理”自定义事件，它只负责生成虚拟节点（VNode）并协调 DOM 更新；真正承载和触发自定义事件的是组件实例的事件系统，而渲染器通过特定约定将模板或 render 函数中的声明转化为可执行逻辑。

自定义事件不是 DOM 事件

自定义事件（如 @submit、@changeMsg）本质是组件实例间的通信机制，与原生 click、input 等 DOM 事件无关。Vue 渲染器在生成 VNode 时，会把 v-on:xxx 或 @xxx 编译为 on 字段上的函数引用，但不会将其绑定到真实 DOM 上——它只保留在 VNode 的 componentOptions 或 listeners 中，供子组件实例内部调用 $emit 时查找响应函数。

render 函数中如何表达自定义事件

在使用 render 函数时，需显式将自定义事件写入 VNode 的 on 选项（注意：不是 nativeOn）：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

on 对象用于接收子组件通过 this.$emit('xxx') 触发的自定义事件
例如：createElement('Child', { on: { 'update': this.onUpdate } })
若想监听子组件内原生事件（如 click），需用 nativeOn，否则会被忽略

模板编译后如何关联事件

当使用单文件组件或字符串模板时，Vue 编译器会把 @custom-event="handler" 转为：

VNode 的 data.on['custom-event'] 或 componentOptions.listeners.custom-event
该 handler 最终被注入子组件实例的 $options._parentListeners，供子组件调用 $emit 时遍历触发
子组件内部执行 this.$emit('custom-event', payload) 时，Vue 会从父级 listeners 中查找对应函数并执行

关键细节：$on / $emit / $off 不走渲染器

手动调用 this.$on('xxx', cb)、this.$emit('xxx')、this.$off('xxx') 是纯 JavaScript 事件总线操作，完全绕过 VNode 和渲染流程。这类用法常见于非父子关系通信，但已不推荐——Vue 3 的 setup 中更倾向使用 mitt 或 provide/inject。

不复杂但容易忽略：自定义事件能否触发，只取决于子组件是否调用了 $emit，以及父组件是否在 VNode 层正确声明了 on 监听器，和 DOM 渲染过程无直接因果关系。