如何在 Vue.js 中使用 /deep/ 或 >>> 或 ::v-deep？

Vue 2

以下内容也适用于 Vue 3，但已弃用。

Sass：   使用 ::v-deep

::v-deep .child-class {
    background-color: #000;
}

不使用 Sass：   使用 >>>

>>> .child-class {
    background-color: #000;
}

无论使用哪种语法，此组件的 <style> 标记都必须是 scoped：

<style scoped>

Vue 3（2022 年 7 月 14 日更新）

在 Vue 3 中，::v- 前缀现在是 deprecated，我们不再需要 >>>。我们可以使用统一的 :deep 选择器无论是否使用 Sass，但现在建议在选择器中使用括号。

使用:deep(.child-class)

:deep(.child-class) {
    background-color: #000;
}

这也适用于 Vue 2.7（最终的 Vue 2 版本）

Vue 3 新的选择器

此外，在 Vue 3 中，有一个 new feature 用于带有 <slot> 的组件，它可以对传递的插槽内容进行样式设置。

老虎机内容   使用:slotted(.child-class)

:slotted(.slot-class) {
    background-color: #000;
}

最后，在 Vue 3 中，有一个 new feature 来注册全局样式，即使是来自 scoped 组件：

全局样式   使用:global(.my-class)

:global(.my-class) {
    background-color: #000;
}

对于任何语法，此组件的 <style> 标记必须是 scoped：

<style scoped>

概括

在 Vue 2 中：

/deep/ 语法已弃用

在 Sass 中使用 ::v-deep，在没有 Sass 的情况下使用 >>>

在 Vue 3 中：

::v-deep .child-class 已弃用，取而代之的是 :deep(.child-class)

::v- 前缀已弃用，取而代之的是：

>>> 语法已弃用

/deep/ 语法已弃用

有新的 :slotted 和 :global 选择器

对于每个版本/语法，此组件的 <style> 标记必须是 scoped：

<style scoped>

---

避免使用 /deep/ 而是使用 ::v-deep

使用 deep selector 可以更改任何范围的 component's css，但很快 /deep/ 将被弃用

Vue Github 参考 - https://github.com/vuejs/vue-loader/issues/913

在这种情况下使用 ::v-deep，并避免弃用 /deep/

参考 - Deep Selector

只需在 chrome 或任何浏览器控制台中使用 devtools 检查您要修改的呈现 element 的类。

然后，在您使用 component 时，修改它

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>

---

我已经成功地在 Vue 的作用域 SCSS 样式表中使用了 /deep/ 并具有以下结构：

.parent-class {
  & /deep/ .child-class {
    background-color: #000;
  }
}

编辑： /deep/ 已被弃用，如果它不再适合您，请参阅解释 ::v-deep 的其他答案

---

虽然在 Documentation 中没有找到，但答案是您尝试访问的组件不能是根组件。将您的单个组件包装在 <div> 中，它应该可以在作用域 scss 上使用 ::v-deep 工作，正如其他人所解释的那样。

---

对我来说，唯一有效的是

<style scoped>.  // sass and scss didn't work
  >>> .deep-selector {
    ...
  }
</style>

---

::v-deep 用作组合器已被弃用。使用 :deep() 代替。

:deep(.child-class) {
    background-color: #000;
}

---

我通过添加解决了这个问题

options: { styleIsolation: 'shared' }, // 添加这个方法: { yourFunc1 () { } } .pet-info{ ::v-deep .title { width: 51px !important;背景颜色：红色！重要 } }

像方法一样在组件中配置这个，和方法一样是同级的。

---