vue 父组件修改子组件样式 /deep/的用法

穿透组件样式

如果想在父组件影响子组件的样式，需要使用/deep/，深度修改样式方法

VUE中 /deep/ 的用法

/deep/ 是一个用于选择器的前缀，它用于在 Vue.js 的样式中穿透组件的scoped样式。在 Vue.js 中，当样式被标记为 scoped 时，它们只应用于该组件的HTML元素。这可以防止样式泄漏到其他组件。但有时可能需要“穿透”这个作用域并应用到子组件或内部的元素。在这种情况下，可以使用 /deep/ 或 ::v-deep

<template>  
  <div class="parent">  
    <ChildComponent />  
  </div>  
</template>  
  
<style scoped>  
.parent /deep/ .child {  
  color: red;  
}  
</style>

在这里，即使 .child 是 ChildComponent 的一部分，并且该组件有自己的作用域，.child 仍然会被赋予红色字体颜色，因为我们使用了 /deep/ 穿透了父组件的作用域。

需要注意的是，随着时间的推移，/deep/ 的使用已经变得不那么普遍，而 ::v-deep 的使用更为常见，因为它是 Vue.js 官方文档中推荐的方式。

>>> 也是用于样式穿透和/deep/一致，用法也相同

注意，vue3.x，>>>和/deep/都已经不被推荐使用了，取而代之的是::v-deep。因此，如果新项目是基于Vue 3.x开发的，使用/deep/可能会导致样式穿透不起作用，或者出现报错。

<template>  
  <div class="parent">  
    <ChildComponent />  
  </div>  
</template>  
  
<style scoped>  
.parent ::v-deep .child {  /* 与 /deep/ 效果一样 */
  color: red;  
}  
</style>