vue如何修改子组件内部样式的同时不影响原组件样式在父组件中的使用

思路

1. 在父组件中引入子组件时，为子组件起一个class名称；
2. 用深度监听器/deep/修改：在父组件的style样式里用该class名称 /deep/ 子组件内待修改的class名称的格式

子组件Button.vue

<template>
  <div class="button">
    <div class="button-out">
      <div class="button-in">button</div>
    </div>
  </div>
</template>
<script>
export default {
    
    
  name: "Button",
};
</script>
<style lang="less">
.button .button-out {
    
    
  position: relative;
  width: 135px;
  height: 51px;
  background: #ffffff;
}
.button .button-in {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -62.5px;
  margin-top: -21px;
  width: 125px;
  height: 42px;
  background: linear-gradient(0deg, #4e8ef8, #66d3fb);
}
</style>

父组件FatherButton.vue

<template>
  <div id="fatherButton">
    <Button class="c-button"></Button>
  </div>
</template>
<script>
import Button from "./Button.vue";
export default {
    
    
  name: "FatherButton",
  components: {
    
    
    Button,
  },
};
</script>
<style scoped>
  .c-button /deep/ .button-out {
    
    
    width: 206px;
  	height: 72px;
  }
</style>