Vue3.x样式穿透报错：::v-deep usage as a combinator has been deprecated.

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

这个警告提示是因为在 Vue.js 中，::v-deep 作为组合选择器（combinator）的用法已经被废弃。新的推荐方式是使用 :deep(<inner-selector>) 来实现相同的深度选择器功能。这通常出现在使用 Vue 单文件组件 (SFC) 并涉及 CSS 深度作用选择器时，例如在 scoped 样式中需要影响子组件的样式。

以下是解决这个报错的具体步骤：

问题背景

在 Vue 中，当在 <style scoped> 中使用 ::v-deep 来穿透 scoped 的限制时，例如：

<style scoped>
.parent ::v-deep .child {
  color: red;
}
</style>

Vue 的编译器会发出警告，提示 ::v-deep 的这种用法已废弃。

解决方法

将 ::v-deep 替换为 :deep()，并将选择器作为参数传入。例如：

修改前

<style scoped>
.parent ::v-deep .child {
  color: red;
}
</style>

修改后

<style scoped>
.parent :deep(.child) {
  color: red;
}
</style>

注意事项

1. 语法差异：

   • :deep() 是一个伪类函数，需要将选择器包裹在括号内，例如 :deep(.child)。
   • 它只影响指定选择器的子组件样式，不会影响当前组件的其他样式。

2. 支持的版本：

   • :deep() 是 Vue 3 中引入的新语法。如果你在使用 Vue 2，建议升级到 Vue 3，或者查看是否有兼容插件（例如 vue-deep-selector）。
   • 如果无法升级，可以暂时忽略警告，但这不是长期解决方案。

3. 其他替代方案：

   • 如果不需要 scoped 样式，可以移除 scoped 属性，这样就不需要使用 :deep()。
   • 或者通过给子组件添加特定的类名或通过 props 传递样式来避免深度选择器。

示例

假设有一个父组件和一个子组件：

<!-- 父组件 -->
<template>
  <div class="parent">
    <child-component />
  </div>
</template>

<style scoped>
.parent :deep(.child) {
  color: red;
}
</style>

<!-- 子组件 -->
<template>
  <div class="child">子组件内容</div>
</template>

运行后，子组件中的 .child 元素会应用 color: red 的样式，且不会有警告。

总结

将 ::v-deep 替换为 :deep() 是最直接的解决方法。确保 Vue 和相关工具（如 Vite 或 Webpack）的版本支持此语法。