vue项目正确使用样式deep穿透

经常开发前端的程序员应该都知道前端一般都是组件化开发，为了避免样式污染通常会使用scoped添加属性选择器，此时如果我们想在父组件中修改子组件的样式便成了难题。其实，我们可以通过以下几种方式修改子组件样式，

• 组件样式穿透

我们可以直接在父组件调用子组件时给组件添加样式，此方案只能添加子组件最外一层样式，如下

<!--子组件-->
<templete>
<div class="child-test1">
  <div class="child-test2"></div>
</div>
</templete>
<script lang="ts" setup>
defineOptions({
  name:"childComponent"
})
</script>
<style scoped lang="scss">
.child-test1{
  width:100px;height:100px;background:red;
  .child-test2{
    width:50px;height:50px;background:green;
  }
}
</style>

<!--父组件-->
<templete>
<div class="father-test1">
  <test class="father-test2"></test>
</div>
</templete>
<script lang="ts" setup>
import test from 'test.vue'
defineOptions({
  name:"FatherComponent"
})
</script>
<style scoped lang="scss">
.father-test1{
  width:200px;height:200px;
  .father-test2{
    background:yellow;
  }
}
</style>

• deep样式穿透

通过deep穿透样式，我们可以更改子组件内部任意样式，如下

<!--父组件-->
<templete>
<div class="father-test1">
  <test></test>
</div>
<!--错误示例->
<!--<div>
  <test  class="father-test1"></test>
</div>-->
</templete>
<script lang="ts" setup>
import test from 'test.vue'
defineOptions({
  name:"FatherComponent"
})
</script>
<style scoped lang="scss">
:deep(.father-test1){
  width:200px;height:200px;
  .child-test2{
    background:yellow;
  }
}
</style>

注意，使用deep的演示类不能挂载在组件上，否则不生效