不推荐使用 Vue 3 ::v-deep 作为组合器。使用 ::v-deep(<inner-selector>) 代替

Question

我开始在 Vue 3 中::v-deep使用以下警告。

::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead

CSS 如下所示：

.parent ::v-deep .child {
   ...
}

使用建议选项的正确方法是::v-deep(<inner-selector>)什么？

Answer 1

小更新：现在，您需要将其更改为：

.parent :deep(.child) {
    (CSS rules)
}

Answer 2

Vue 2.7 中也出现此问题

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

我认为上述解决方案都不能解决该警告。

编辑工作使用：

:deep() {
  .class {}
}

但它也发现 npm 依赖项有错误

Answer 3

相关的 RFC 在这里：

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

我相信您需要将其更改为：

.parent ::v-deep(.child) {