Vue父组件使用SCSS控制子组件样式

目的

目的：父组件中的style控制子组件的样式
子组件：

.item-list {
  background-color: #5a57557a;
  #item-ul {
    .item-li {
       a {
         color: #ffffff;
       }
       .icon-jiantouyou {
         color: #ffffff;
       }
     }
   }
}

方式

使用::v-deep ，然后就可以像在子组件中直接书写样式一样书写样式了（/deep/在我这里会报错）

<style lang="scss" scoped>
::v-deep .item-list {
  background-color: #fff;
  border: 1px solid #ff6700;
  #item-ul {
     .item-li {
       a {
        color: #424242;
       }
       .icon-jiantouyou {
         color: #e0e0e0;
       }
     }
   }
 }
</style>