一、概述

项目需要的原因，在sub组件的父级list组件中需要用到xhcj组件，同时sub组件中也用到了xhcj组件，两个地方代码逻辑是相同，仅仅是样式有些微的差别，所以决定共用组件，然后覆盖样式。

style标签上的scoped属性会致使样式只作用于当前组件，对子组件是不起作用的，但是不加scoped会使父级引入的xhcj和这里引用的xhcj样式都变化，所以也是不可以的。

二、解决方法

这是最开始写的版本，在sub中，我写了两个style标签，需要覆盖的那部分没有加scoped属性，也实现了我需要的效果，但是写两个style标签还是觉得不太合适。

<style scoped lang='scss'>
   ...
</style>
<style lang="scss">
//.subscribe  这个样式sub组件中的，是为了覆盖这个组件下面的xhcj组件的样式  
  .subscribe .xhjj{
    border: none;
    position: static;
    background: transparent;
    width: auto;
    height: auto;
    .sbottom{
      height: auto;
      overflow: inherit;
      overflow-x: inherit;
      .treeFirst{
        border: none;
        background: transparent;
      }
      .flex-w-wrap{
        background-color: transparent!important;
        .treethird{
          width: 25%;
        }
      }
    }
  }
</style>

然后改成了下面这个版本

<style scoped lang="scss">
  ...... 
  .subscribe /deep/ .xhjj{
    border: none;
    position: static;
    background: transparent;
    width: auto;
    height: auto;
    .sbottom{
      height: auto;
      overflow: inherit;
      overflow-x: inherit;
      .treeFirst{
        border: none;
        background: transparent;
      }
      .flex-w-wrap{
        background-color: transparent!important;
        .treethird{
          width: 25%;
        }
      }
    }
  }
</style>