###
Vue 2 中深度选择器
样式穿透的实现方法
在
Vue 2 中，为了实现组件间
样式的
穿透（即让父组件的
样式作用于子组件），通常会使用深度选择器。以下是关于 `::v-deep` 的详细介绍及其使用方法。
#### 1
. 深度选择器的作用
当一个
Vue 组件启用了 Scoped CSS 功能时，默认情况下其
样式仅对该组件生效，不会影响其他组件或子组件的内容。然而，在某些场景下，可能需要通过父组件的
样式来修改子组件的
样式。此时可以通过深度选择器实现这一目标[^1]。
---
#### 2
. 使用 `::v-deep` 实现
样式穿透
在
Vue 2 中推荐使用的深度选择器是 `::v-deep`。它的语法如下所示：
```css
<style scoped>
.parent ::v-deep
.child {
background-color: red;
}
</style>
```
上述代码表示 `
.parent` 父组件中的
样式将会影响 `
.child` 子组件的背景颜色。经过编译后，这段代码会被转换为类似以下的形式：
```css
.parent[data-v-f3f3eg9]
.child {
background-color: red;
}
```
这里 `[data-v-f3f3eg9]` 是由
Vue 自动生成的一个属性标记，用于确保
样式的唯一性和范围限定[^4]。
---
#### 3
. 替代方案 `/deep/` 和 `>>>`
除了 `::v-deep` 外，
Vue 2 还支持另外两种写法：`/deep/` 和 `>>>`。它们的功能完全一致，只是不同的书写形式而已。例如：
```css
<style scoped>
.parent /deep/
.child {
font-size: 20px;
}
.parent >>>
.grandChild {
color: blue;
}
</style>
```
需要注意的是，部分预处理器（如 Sass）可能会对 `>>>` 解析出现问题，因此更推荐使用 `::v-deep` 或 `/deep/` 来替代[^4]。
---
#### 4
. 示例代码
假设我们有两个组件：`ParentComponent
.vue` 和 `ChildComponent
.vue`。我们需要从父组件中设置子组件的按钮
样式。
##### ParentComponent
.vue
```html
<template>
<div class="parent">
<ChildComponent />
</div>
</template>
<script>
import ChildComponent from '
./ChildComponent
.vue';
export default {
components: { ChildComponent },
};
</script>
<style scoped>
.parent ::v-deep
.child-button {
background-color: green;
color: white;
}
</style>
```
##### ChildComponent
.vue
```html
<template>
<button class="child-button">Click Me</button>
</template>
<style scoped>
.child-button {
padding: 10px;
border-radius: 5px;
}
</style>
```
运行以上代码后，尽管 `ChildComponent` 自身设置了默认
样式，但由于 `ParentComponent` 使用了 `::v-deep`，最终按钮的颜色和背景色被成功覆盖。
---
#### 5
. 注意事项
- **优先级问题**
样式穿透后的规则仍然遵循普通的 CSS 层叠顺序。如果子组件中有更高优先级的选择器或者使用了 `!important`，则可能导致
穿透失败[^2]。
- **兼容性测试**
不同浏览器对于深度选择器的支持可能存在细微差异，建议在实际开发过程中进行全面测试以验证预期行为[^3]。
- **升级考虑**
如果未来计划迁移至
Vue 3，则需注意
Vue 3 推荐的方式已改为 `:deep()`，应提前做好相应调整准备[^1]。
---
扫一扫
2456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
