vue 3 多根节点组件不自动挂载 class/style/id 等非 props 属性，需设 inheritattrs: false 并用 v-bind="$attrs" 手动分发；默认会隐式挂载到首个合法子节点，仅限白名单属性。
Vue 3 多根节点组件（Fragment）本身不对应真实 DOM，所以父组件传入的 class、style、id 等非 props 属性无法自动挂载到某个具体元素上——Vue 不知道该往哪塞。这不是 bug，而是设计使然，需要开发者主动干预。
明确关闭自动继承并手动分发
当组件确实需要多个根节点，又必须接收并应用非 props 属性时，最清晰可控的方式是：关闭默认继承，再用 v-bind="$attrs" 显式绑定到目标子节点。
- 在组件选项中设置 inheritAttrs: false，阻止 Vue 自动尝试继承
- 在模板中选择一个语义合理、样式关键的子节点（比如主容器或第一个可见元素），对其使用 v-bind="$attrs"
- 若需将不同属性分发到不同节点（如
class给 header、data-test给 footer），可解构$attrs后分别绑定
利用首个子节点的隐式继承（适合简单场景）
如果你没设 inheritAttrs: false，Vue 3 默认会把未声明的非 props 属性（class、style、id 等）合并到第一个子节点上。这个行为是静默生效的，无需额外代码。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章