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