Vue 3：：v-deep用作组合符已被弃用,请用途：：v-deep(< inner-selector>)

r8uurelv 于 2023-01-02 发布在 Vue.js

关注(0)|答案(3)|浏览(493)

我在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>)的正确方法是什么？

3条答案

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

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

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

问题中提到的警告消息在Vue 3的后续版本中已更改，建议改为使用:deep()。这是::v-deep()的别名，已添加到以下文档中：
https://v3.vuejs.org/api/sfc-style.html#deep-selectors

Vue 2.7中也出现此问题

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

我认为以上两种解决方案都不能解决这个警告。
编辑工作使用：

:deep() {
  .class {}
}

但它也发现了npm依赖项中的错误