在Vue.js中使用::v-deep是否属于反模式？

结论：::v-deep本身不是不良实践，但直接依赖子组件内部未对外暴露的CSS类名来做样式穿透，确实是需要警惕的耦合写法

为什么::v-deep存在？ #

它是Vue官方提供的合法样式穿透工具，专门用来解决父组件需要微调子组件（尤其是第三方组件）样式，但子组件没有提供样式定制入口的场景。比如你用了一个UI库的按钮组件，需要修改它内部的图标间距，而组件本身没给对应的props或CSS变量，这时候用::v-deep就是合理的解决方案。

直接依赖子组件内部类名的风险 #

你提到的点很关键：子组件里的.grandchild属于内部实现细节，组件作者完全可能在迭代时重命名、移除这个类，或者调整DOM结构。一旦这么做，你的父组件样式就会直接失效，而且这种依赖关系没有任何显性提示，排查问题会很麻烦。本质上这是破坏了组件的封装性，把父组件和子组件的内部实现绑定在了一起，增加了维护成本。

更稳妥的替代方案 #

• 优先让子组件提供样式扩展接口：如果是自己维护的子组件，尽量通过props传递自定义类名、暴露CSS变量，或者提供插槽让父组件控制部分内容。比如给子组件加一个grandchildClass的props，父组件传入自定义类名后直接在父组件的scoped样式里写规则，完全不需要::v-deep。
  示例（子组件）：

  <template>
    <div :class="['grandchild', grandchildClass]">...</div>
  </template>
  <script setup>
  defineProps({
    grandchildClass: String
  })
  </script>
  

  父组件使用：

  <template>
    <div class="parent">
      <Child grandchild-class="parent-adjusted-grandchild" />
    </div>
  </template>
  <style scoped>
  .parent .parent-adjusted-grandchild {
    display: block;
  }
  </style>
  

• 使用第三方组件时留好注释：如果必须用::v-deep穿透第三方组件，一定要在代码里加注释，说明依赖的是第三方组件的哪个内部类，比如/* 依赖Element Plus的.el-button__icon类，若组件更新需同步检查 */，方便后续维护。

总结 #

::v-deep是个有用的工具，但别拿来“走捷径”——能通过组件封装的合法方式定制样式就别用穿透，只有在没有其他办法时再用，并且要避免绑定子组件的内部实现细节。

内容的提问来源于stack exchange，提问作者pjivers