Vue父组件传递的class为何只在子组件根节点生效？

Question

vue子组件接收了父组件传的class，但为什么只有子组件的根节点能找到对应的样式呢？代码如下

// 父组件
<template>
 <y-button class="red-class">确认</y-button>
</template>
<style>
 .red-class { background-color: red }
</style>

// 子组件
<template>
 <div>
 <button></button>
 </div>
</template>

现在这样的效果是父组件传递的class直接绑定在了子组件最外层的div节点上，且样式生效，期望效果是将class绑定在子组件的button节点上并且生效样式，尝试过以下方式。
1.使用$attrs将class绑定在button上，button上有class类名了，但是没有样式(不是被覆盖，而是根本就没有)，设置inhertAttrbute后也不生效。
2.如果删除外层div，将button作为最外层，那么类名和样式才会生效。
3.父组件传递的class对应的样式加deep也可以生效
4.发现button上没有data属性

如何在保留外层div的情况下让button继承父组件传递的class并能加载对应的样式，且样式不需要deep进行包裹？

Answer 1

官网有写注意提示：

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

1. 当你想向子组件传递 class，可以改写其他属性来代替，然后在子组件上，手动在 button 上绑定该属性
2. 使用 provide/inject 传递，也是可以的

Answer 2

按照你的想法，是在父组件上修改子组件的样式，如果class给不了的话你可以绑一个动态style上去，一样可以实现样式定制化，这样不用deep又能私有化样式

// 父组件
<template>
 <y-button :custom="custom ">确认</y-button>
</template>
<script setup>
const custom = ref({
   backgroundColor: 'red'
})
</script >

// 子组件
<template>
 <div>
 <button :style="custom"></button>
 </div>
</template>
<script setup>
const props = defineProps({
  custom: {
    type: Object,
    default: () => {}
  }
});
</script>

Answer 3

在子组件中使用 v-bind 将父组件传递的 class 绑定到子组件内部的 button 元素上。

// 父组件
<template>
  <y-button class="red-class">确认</y-button>
</template>
<style>
  .red-class { background-color: red; }
</style>

// 子组件
<template>
  <div>
    <button :class="$attrs.class"></button>
  </div>
</template>

Answer 4

这个很简单，注意参数的传递即可