vue中::deep 用法

`::deep` 是 Vue 中的一个伪类选择器，用于在组件作用域内设置全局样式。通常情况下，样式只在组件的根元素上生效，但是使用 `::deep` 可以使样式渗透到所有子组件中。

例如，假设你有一个组件 `MyComponent`，其中包含一个子组件 `MyChildComponent`，你可以使用 `::deep` 选择器来设置 `MyChildComponent` 的样式，如下所示：

<template>
  <div class="my-component">
    <MyChildComponent />
  </div>
</template>

<style scoped>
.my-component ::deep .my-child-component {
  color: red;
}
</style>

在这个例子中，`.my-child-component` 类的样式将被应用到 `MyChildComponent` 组件中的所有元素。

需要注意的是，`::deep` 已经被标记为废弃的选择器，建议使用 `>>>` 或 `/deep/` 来代替。例如，上面的示例可以写成：

<template>
  <div class="my-component">
    <MyChildComponent />
  </div>
</template>

<style scoped>
.my-component >>> .my-child-component {
  color: red;
}
</style>

相关问题

vue ::deep

在Vue 3中，`::deep`伪类选择器已经被弃用，应使用`:deep()`伪类选择器来代替。这是为了更好地与CSS选择器的规范一致。引用中提到了这个变化，并给出了使用`:deep()`伪类选择器的示例代码:

<style>
:deep(.class) { }
</style>

另外，引用和引用中也给出了在父元素中使用`:deep()`伪类选择器的示例代码:

<style lang="scss">
.父元素 {
  :deep(.class) { }
}
</style>

<style>
.父元素class :deep(.class) { }
</style>

这些示例代码都展示了如何在Vue 3中使用`:deep()`伪类选择器来进行深度选择器的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3学习：:deep()深度选择器的用法](https://blog.csdn.net/weixin_44001222/article/details/127456078)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3 中 scss 使用 :deep 不支持嵌套，::v-deep 又即将弃用，怎么办？

在 Vue3 中，可以使用 `::v-deep` 或 `>>>` 来实现深度选择器，但是官方已经宣布 `::v-deep` 即将被弃用，而 `>>>` 在某些情况下会出现问题。

解决方法：

1.使用 `:global`，可以将样式应用于整个组件或应用程序。例如，要应用于整个组件：

<style scoped>
:global(.my-class) {
  color: red;
}
</style>

2.使用 CSS 变量，可以在组件中定义变量，并在样式中使用它们。例如：

<style scoped>
:root {
  --my-color: red;
}

.my-class {
  color: var(--my-color);
}
</style>

3.使用 `::v-deep` 的替代方案 `::slotted`，它能在父组件样式中选择子组件的内容。例如：

/* 子组件 */
<template>
  <div class="my-class">
    <slot></slot>
  </div>
</template>

/* 父组件 */
<template>
  <div>
    <slot>
      <p class="my-class">This paragraph will be styled</p>
    </slot>
  </div>
</template>

<style scoped>
::slotted(.my-class) {
  color: red;
}
</style>

以上是一些可行的解决方法，可以根据实际情况选择适合自己的方式。