Vue 3 透传 Attributes 第三章：多根组件的 Attributes 透传策略完全指南
扫描 二维码 关注或者微信搜一搜： 编程智域 前端至全栈交流与成长 发现 1000+ 提升效率与开发的 AI 工具和实用程序 ： https://tools.cmdragon.cn/ 一、为什么多根组件不能自动透传 1.1 Fragment 的引入 Vue 3 支持 Fragment （多根节点组件），允许组件模板中有多个根元素。这是 Vue 3 相比 Vue 2 的一个重要改进。 <!-- Vue 2 不允许：必须有唯一的根元素 --> < template > < div > 根 1 </ div > < div > 根 2 </ div > </ template > <!-- Vue 3 允许：多个根元素 --> 1.2 自动透传的歧义问题 在单根组件中，attributes 可以明确地透传到唯一的根元素上。但在多根组件中，就产生了 歧义 ： attributes 应该透传到哪个根元素上？ Syntax error in graph mermaid version 9.1.2 ERROR: [Mermaid] Lexical error on line 3. Unrecognized text. ... B -->|单根节点 | C[明确：透传到根元素] B -->|多 -----------------------^ 因为有多种可能的选择，Vue 3 的设计决策是： 多根组件默认不自动透传 attributes ，需要开发者手动指定。 1.3 示例对比 单根组件（自动透传） ： <!-- SingleRoot.vue --> < template > < div class = "wrapper" > < slot /> </ div > </ template > <!-- 父组件传递的 class 自动透传到 div.wrapper --> < SingleRoot class = "outer" > 内容 </ SingleRoot ...