Vue 中父组件传递 class 和 style 的行为

1. 父组件传递方式

复制 1<!-- Children.vue -->
 2<template>
 3  <div>子组件内容</div>
 4</template>

父组件：

复制 1<template>
 2  <Children class="red-text" :style="{ fontSize: '20px' }" />
 3</template>

---

2. Vue 的处理逻辑

Vue2 和 Vue3 共同点

• 父组件上的 class 和 style 不会当作普通 props，而是合并到子组件根元素。
• 如果子组件只有一个根元素，则合并成功。

Vue2 示例

复制 1<!-- Children.vue -->
 2<template>
 3  <div class="child" :style="{ color: 'blue' }">
 4    内容
 5  </div>
 6</template>

父组件：

复制 1<Children class="red-text" :style="{ fontSize: '20px' }" />

最终渲染：

复制 1<div class="child red-text" style="color: blue; font-size: 20px;">
 2  内容
 3</div>

Vue3 特性（多根节点）

复制 1<!-- Vue3 子组件 -->
 2<template>
 3  <div>子元素1</div>
 4  <div>子元素2</div>
 5</template>

父组件：

复制 1<Children class="red-text" style="font-size:20px" />

结果：⚠️ class 和 style 不会作用到任何子元素。
需要显式透传：

复制 1<!-- Children.vue -->
 2<template>
 3  <div v-bind="$attrs">子元素1</div>
 4  <div>子元素2</div>
 5</template>

---

3. 总结

情况	Vue2	Vue3
单根元素子组件	自动合并到根元素	自动合并到根元素
多根元素子组件	不存在	默认不会合并，需要 v-bind="$attrs"
style 冲突	父优先级高	父优先级高
class	合并	合并