vue.js - 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 传递，也是可以的