javascript - v-deep 是 Vue.js 中的反模式吗？

Question

在设计 Vue.js 组件样式时，可以使用 ::v-deep 来定位嵌套组件的 CSS 类，例如

<template>
  <div class="parent">
    <Child /> <!-- contains .grandchild CSS class -->
  </div>
</template>

// ...

<style lang="scss" scoped>
.parent {
  ::v-deep {
    .grandchild {
      display: block;
    }
  }
}
</style>

鉴于重命名或删除 .grandchild 可能会破坏 Child 的使用者，使用 v-deep 是否被认为是不好的做法？

Answer 1

这取决于上下文，在您使用无法直接修改的组件的情况下，它可能是必不可少的，例如第三方组件。 在其余情况下，最好遵循最佳实践，例如使用 props 来管理子组件样式或使用全局 CSS。

因此，::v-deep 只能在没有其他选择的情况下用作最后的手段。