vue子组件使用父组件样式

在 Vue 中，子组件默认是无法直接访问父组件的样式的。不过，你可以通过 Vue 的一些特殊方式来实现这一点。

一种方式是在父组件中定义一个样式类，然后在子组件中使用 `inheritAttrs` 属性将该样式类传递给子组件的根元素。具体步骤如下：

1. 在父组件中定义一个样式类，比如 `parent-style`，并在其中定义好需要的样式。

2. 在子组件中使用 `inheritAttrs` 属性，将父组件的样式传递给子组件的根元素。

   <template>
     <div v-bind="$attrs" class="child-component">
       <!-- 子组件内容 -->
     </div>
   </template>
   <script>
   export default {
     inheritAttrs: false,
     // ...
   }
   </script>

3. 在父组件中引入子组件，并在引入时添加 `class` 属性，将父组件的样式类传递给子组件的根元素。

   <template>
     <div class="parent-component">
       <!-- 父组件内容 -->
       <child-component class="parent-style"></child-component>
     </div>
   </template>
   <script>
   import ChildComponent from './ChildComponent.vue'
   
   export default {
     components: {
       ChildComponent
     },
     // ...
   }
   </script>

这样，在子组件的根元素上就可以自动继承父组件的样式了。