在Vue父组件中修改子组件的样式

若两个不同的页面使用了同一个组件，且不同页面对使用组件的样式需求不同时，可在父组件中修改子组件的样式。

父组件1
<template>
  <div id="father1">
  ...
      <MyComponent />
    </div>
  </div>
</template>

父组件2
<template>
  <div id="father2">
   ...
      <MyComponent />
    </div>
  </div>
</template>

子组件
<template>
  <div>
   ...
     <div class="infoContent">
        <span id="myInfo">
         ....
        </span>
     </div>
  </div>
</template>

1.若想在父组件1修改子组件的样式，而不影响其他组件，可结合scoped与deep深度选择器使用

组件father1
<style lang="scss" scoped>
:deep(.infoContent #myInfo) {
      font-size: 16px;
    }
<style>

2.在父组件添加类名

父组件1
<template>
  <div id="father1">
  ...
      <MyComponent class="testClass" />
    </div>
  </div>
</template>
<style lang="scss">
.testClass{
   #myInfo{
      font-size: 16px;
   }
}
<style>