子组件继承父组件样式（穿透scoped）

如果在父组件添加了 scoped 属性，子组件将无法直接继承父组件的样式。scoped 属性会将父组件的样式限定在父组件的作用域内，在子组件中无法直接访问到父组件的样式。

如果你希望在有父组件有 scoped 属性的情况下，子组件仍然可以继承父组件的样式，你可以使用以下两种方法：

1. 使用深度选择器（Deep Selector）：在子组件中，可以使用 >>> 或 /deep/ 选择器来穿透父组件的作用域，从而应用父组件的样式。示例如下：

<template> <div class="parent"> 
<!-- 父组件的内容 --> 
<child-component></child-component> 
</div> </template> 
<style scoped> 
.parent { /* 父组件的样式 */ } 
</style>

<!-- ChildComponent.vue --> 
<template> <div class="child"> 
<!-- 子组件的内容 -->
 </div> </template> 
<style scoped>
 /* 使用深度选择器穿透父组件的作用域 */ 
.parent >>> .child { /* 继承父组件的样式 */ } 
</style>

在子组件的样式中，使用 .parent >>> .child 来选中父组件中的 .child 元素，并继承父组件的样式。

1. 使用 CSS 预处理器：同样可以使用 CSS 预处理器的 @import 和 @extend 来继承父组件的样式，不受 scoped 属性的影响。示例如下：

// ParentComponent.vue <template> <div class="parent"> 
<!-- 父组件的内容 --> 

<child-component></child-component> </div> </template> <style lang="scss" scoped> 
.parent { /* 父组件的样式 */ } 
</style>

// ChildComponent.vue <template> <div class="child">
 <!-- 子组件的内容 -->
 </div> </template> 
<style lang="scss" scoped>
 @import 'path/to/ParentComponent.vue';
 .child {
 /* 子组件的样式 */ @extend .parent;
 // 继承父组件的样式 } 
</style>

在子组件的样式中，导入父组件的样式文件，并使用 @extend 来继承父组件的样式。