Vue 3 事件透传机制详解
1. 基础概念
- 事件处理器的本质：在 Vue 中，
@close="handler"实际上会被编译为一个名为onClose的 prop，其值为对应的函数。 - 透传规则：组件上绑定的、但未在
defineProps中声明的属性（包括普通属性和事件监听器），会自动传递给组件的根元素。 - 引用保持不变：在透传过程中，函数的引用始终是同一个，不会重新创建。
2. 透传工作原理
可以将其理解为“属性/事件的自动继承”。
2.1 传递过程
当一个属性或事件监听器从父组件传递给子组件时：
- 子组件检查自身
props是否声明了该属性。 - 如果未声明，则该属性会被放入子组件的
$attrs对象中。 - 如果子组件是单根元素，Vue 会自动将这些
$attrs绑定到该根元素上。如果是多根节点组件，则不会自动绑定，需要手动处理。 - 该过程可以逐层向下进行，直到被某个组件显式接收或绑定到最终的元素上。
2.2 事件执行机制
- 直接调用：当底层元素触发事件（如
click）时，它实际上调用的是透传下来的、来自最外层组件的那个原始函数。 - 上下文正确：函数执行时，
this指向定义它的原始组件实例。
3. 透传内容的类型
- 普通 HTML 属性：如
id、class、data-*、style等。 - 事件监听器：以
on开头的属性，如onClick、onClose。
4. 如何控制透传？（防护与定制）
有时我们不希望所有属性都自动透传。
4.1 显式声明为 Prop
在子组件中使用defineProps声明属性，即可阻止其继续向下透传。
javascript
体验AI代码助手
代码解读
复制代码
const props = defineProps({ onClose: Function, // 声明后，onClose 将不再进入 $attrs })
4.2 完全禁用自动透传
设置inheritAttrs: false，Vue 将不再自动将$attrs绑定到根元素。
php
体验AI代码助手
代码解读
复制代码
defineOptions({ inheritAttrs: false })
4.3 手动控制绑定位置
禁用自动透传后，可以使用v-bind="$attrs"将属性精确绑定到任意元素上，实现更灵活的传递。
xml
体验AI代码助手
代码解读
复制代码
<template> <div class="wrapper"> <!-- 将透传属性只绑定到内部某个元素 --> <button v-bind="$attrs">点击我</button> </div> </template>
原文：https://juejin.cn/post/7598767580306309174
)
)
