Vue Scoped CSS 样式穿透之谜：搞定子组件样式的终极秘笈

本文讲述了在Vue中，当在父组件使用scoped属性时，如何通过添加deep属性来穿透并影响子组件（如vant的tabbarItem）的样式，以解决CSS作用域带来的限制问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0引言：当 `scoped` 遇上“不听话”的子组件

在 Vue.js 的日常开发中，scoped 属性无疑是我们维护组件样式独立性、避免全局污染的得力助手。它通过为组件的 DOM 元素添加唯一的自定义属性（如 data-v-xxxxxx），并相应地修改 CSS 选择器，确保样式只作用于当前组件。一切看起来都那么美好，直到我们尝试在父组件中修改一个来自第三方 UI 库（比如 Vant）或者封装较深的子组件的样式时……

“为什么我明明在父组件的 <style scoped> 里写了样式，子组件就是不生效？！”

这个熟悉的抓狂场景，相信不少 Vue 开发者都曾经历过。控制台翻来覆去地检查，样式优先级调了又调，子组件却依旧我行我素，仿佛父组件的 scoped 样式对它而言只是“耳旁风”。难道是 scoped 失效了？还是 Vue 又有什么“隐藏设定”？

别急，这并不是 Vue 的 bug，而是 scoped CSS 作用域限制的正常表现。今天，我们就来深入剖析这个“老大难”问题，并祭出解决它的“神器”——样式穿透选择器 ::v-deep 和 :deep()。

1 “隔阂”的真相：`scoped` CSS 的边界

要理解为什么父组件的 scoped 样式默认情况下无法影响子组件，我们首先需要明白 scoped 的工作原理。

当你在 <style> 标签上添加 scoped 属性时，Vue 的模板编译器会做两件事：

为当前组件的所有 DOM 元素添加一个唯一的自定义属性，例如 data-v-f3f3eg9g。
将你写的 CSS 选择器进行改写，使其末尾附加这个自定义属性选择器。例如，如果你写了 .my-class { color: red; }，它可能会被编译成 .my-class[data-v-f3f3eg9g] { color: red; }。

这样一来，这些样式就只会匹配那些带有特定 data-v-xxxxxx 属性的元素，也就是当前组件模板内的元素。

那么问题来了：子组件的根元素及其内部元素，它们有父组件的那个 data-v-xxxxxx 属性吗？

答案通常是：没有（除非子组件的根元素恰好是你通过 slot 传入的，并且在父组件模板中）。子组件是它自己的一个独立作用域，它会有属于自己的 data-v-yyyyyy 属性（如果它自己也用了 scoped）。

因此，父组件中编译后的 scoped 选择器，如 .child-selector[data-v-parent-hash]，自然无法匹配到子组件内部的 .child-selector 元素，因为子组件的元素上并没有 data-v-parent-hash 这个属性。这就是“隔阂”产生的根本原因。

举个例子：

父组件 ParentComponent.vue:

<template>
  <div class="parent-wrapper">
    <p class="parent-text">这是父组件的文字</p>
    <ChildComponent />
    </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent }
}
</script>

<style scoped>
.parent-wrapper .parent-text {
  color: blue; /* 生效 */
}

/* 尝试修改子组件的样式，通常无效 */
.parent-wrapper .child-text { /* 或者直接写 .child-text */
  color: red !important; /* 通常不会生效 */
}
</style>

子组件 ChildComponent.vue:

<template>
  <div class="child-wrapper">
    <p class="child-text">这是子组件的文字</p>
  </div>
</template>

<style scoped>
.child-text {
  color: green; /* 子组件自身的 scoped 样式 */
}
</style>

在上述例子中，父组件尝试设置 .child-text 的颜色为红色，但由于 scoped 的限制，这个样式不会应用到 ChildComponent 内部的 p 标签上。

2 打破壁垒：样式穿透选择器登场

为了解决这个问题，Vue 提供了特殊的“深度选择器”或“样式穿透”的机制，允许父组件的 scoped 样式“穿透”到子组件。

1. `::v-deep` (推荐) / `/deep/` (已废弃，但部分旧项目仍在使用)

::v-deep 是一个伪元素选择器，它可以将其后的选择器的作用域“放宽”，使其能够影响到子组件的内部元素。

语法：

/* 外层选择器 (父组件内的) */
.parent-selector ::v-deep .child-inner-selector {
  /* 你的样式 */
}

修改上面的例子： 父组件 ParentComponent.vue 的 <style scoped> 部分：

<style scoped>
.parent-wrapper .parent-text {
  color: blue;
}

/* 使用 ::v-deep 穿透 */
.parent-wrapper ::v-deep .child-text {
  color: red !important; /* 现在会生效了！ */
}
</style>

Vue 编译器在处理 ::v-deep 时，会将 [data-v-parent-hash] 这个属性选择器只应用到 ::v-deep 之前的部分，而之后的部分则保持原样，从而能够选中子组件的元素。例如，上面的代码可能被编译成类似： .parent-wrapper[data-v-parent-hash] .child-text { color: red !important; } 注意，这里 .child-text 前面没有了父组件的哈希，使得它可以匹配到任何后代元素中拥有 .child-text 类名的元素。

注意： /deep/ 是 ::v-deep 的一个别名，在某些 Sass/Less 等预处理器中可能因为无法正确解析 ::v-deep 而被使用，但它已被废弃，不推荐在新项目中使用。

2. `:deep()` (SFC 推荐，CSS 标准草案)

随着 CSS 标准的发展，:deep() 伪类被提出作为深度选择的更标准方式。在 Vue 3+ 的单文件组件 (SFC) 中，推荐使用 :deep()。

语法：

.parent-selector :deep(.child-inner-selector) {
  /* 你的样式 */
}

或者，如果子选择器比较复杂：

:deep(.parent-selector .child-inner-selector .another-class) {
  /* 你的样式 */
}

修改例子使用 :deep()： 父组件 ParentComponent.vue 的 <style scoped> 部分：

<style scoped>
.parent-wrapper .parent-text {
  color: blue;
}

/* 使用 :deep() 穿透 */
.parent-wrapper :deep(.child-text) {
  color: red !important; /* 同样会生效 */
}
</style>
```:deep()` 的行为与 `::v-deep` 类似，但它是基于 CSS 标准草案的，更具前瞻性。

## 实战演练：优雅修改 Vant TabbarItem 样式

现在，让我们回到用户在提问中提到的具体场景：在 Vue 文件中嵌套使用 Vant UI 库的 `TabbarItem` 组件时，如果父组件的 `<style>` 标签使用了 `scoped` 属性，直接写的样式是无法调整到 `TabbarItem` 内部元素的。

假设我们想修改 Vant `TabbarItem` 被选中时的文字颜色和图标颜色。

**目录结构 (示例):**

src/ ├── components/ │ └── MyTabBar.vue (我们的父组件) └── App.vue


`MyTabBar.vue`:
```vue
<template>
  <div class="my-custom-tabbar-container">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
      <van-tabbar-item icon="search">标签2</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Tabbar, TabbarItem } from 'vant'; // 假设已按需引入或全局引入

export default {
  name: 'MyTabBar',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup() {
    const active = ref(0);
    const onChange = (index) => console.log(`Tab changed to: ${index}`);
    return { active, onChange };
  },
};
</script>

<style scoped>
.my-custom-tabbar-container {
  /* 可以给容器加一些自定义样式 */
  border-top: 1px solid #eee;
}

/* 错误尝试：直接修改 Vant TabbarItem 内部样式 (通常无效) */
.my-custom-tabbar-container .van-tabbar-item--active .van-tabbar-item__text {
  color: #ff0000 !important; /* 红色 */
}
.my-custom-tabbar-container .van-tabbar-item--active .van-icon {
  color: #ff0000 !important; /* 红色 */
}

/* 正确做法：使用 ::v-deep 或 :deep() */
/* 使用 ::v-deep */
.my-custom-tabbar-container ::v-deep .van-tabbar-item--active .van-tabbar-item__text {
  color: #1989fa !important; /* Vant 官方蓝色，或者你想要的任何颜色 */
  font-weight: bold;
}
.my-custom-tabbar-container ::v-deep .van-tabbar-item--active .van-icon {
  color: #1989fa !important;
}

/* 或者使用 :deep() (推荐) */
/*
.my-custom-tabbar-container :deep(.van-tabbar-item--active .van-tabbar-item__text) {
  color: #07c160 !important; // 微信绿
  font-size: 14px;
}
.my-custom-tabbar-container :deep(.van-tabbar-item--active .van-icon) {
  color: #07c160 !important;
}
*/
</style>

在上面的代码中：

我们首先尝试了直接通过类名 .van-tabbar-item--active .van-tabbar-item__text 来修改激活状态下 TabbarItem 的文字颜色，这在 scoped 环境下通常是行不通的。
然后，我们展示了如何使用 ::v-deep (或注释掉的 :deep()) 来成功穿透 scoped 的限制，准确地定位到 Vant 组件内部的类名，并修改其样式。

关键点：

你需要通过浏览器的开发者工具检查 Vant (或其他子组件) 内部实际渲染出来的 DOM 结构和类名，才能准确地写出穿透后的选择器。
为了避免样式冲突和提高特异性，通常会在深度选择器前加上一个父组件特有的类名，如 .my-custom-tabbar-container。

3 样式穿透：利弊权衡与最佳实践

虽然 ::v-deep 和 :deep() 非常强大，但在使用时也需要注意一些事项：

优点：

解决燃眉之急：能够快速有效地修改封装较深或第三方子组件的样式。
灵活性高：可以针对性地覆盖子组件的特定样式。

缺点与注意事项：

破坏封装性：过度或不恰当地使用样式穿透，会使得组件间的样式耦合度增高，违背了 scoped CSS 的初衷。
维护性降低：如果子组件的内部结构或类名发生变化（尤其是第三方库升级时），这些穿透样式可能会失效，导致维护困难。
全局污染风险：虽然 ::v-deep 或 :deep() 本身是作用在 scoped 样式块内的，但如果穿透的选择器不够精确（例如直接 ::v-deep .some-common-class），它依然可能影响到页面上其他地方拥有相同类名的不相关子组件。

最佳实践：

优先考虑组件自身 Props 或 Slots：如果子组件提供了用于自定义样式的 props (例如 color, fontSize 等) 或者具名/作用域插槽 (slots)，应优先使用这些更规范的方式。
精确打击：在使用穿透选择器时，务必使其尽可能精确。通常结合父组件的唯一类名来限定穿透的范围，例如 .my-component ::v-deep .target-class 而不是直接 ::v-deep .target-class。
谨慎使用 !important：虽然有时为了覆盖子组件的强样式不得不使用 !important，但应尽量避免。优先通过提高选择器特异性来解决。
注释说明：对于使用了样式穿透的地方，最好添加注释，说明为什么需要这样做以及目标是什么，方便后续维护。
考虑 CSS Variables (自定义属性)：如果子组件支持通过 CSS Variables 来定制样式，这是一种更优雅且耦合度更低的方式。父组件可以定义 CSS Variables，子组件内部使用这些变量。

4 总结：驾驭 `scoped` 的“任督二脉”

scoped CSS 是 Vue 组件化开发中保障样式隔离的基石，但其作用域限制有时也会给我们带来挑战，尤其是在处理子组件样式时。通过理解 scoped 的原理，并掌握 ::v-deep 和 :deep() 这两大样式穿透利器，我们就能够有效地打破这种“壁垒”，实现对子组件样式的精准控制。

记住，技术本身没有好坏，关键在于如何理解和运用。样式穿透虽好，但不可滥用。在追求快速解决问题的同时，更要权衡其对项目封装性和维护性的长远影响。希望这篇文章能帮助你彻底搞懂 Vue 中的样式穿透，让你在未来的开发中，面对再“不听话”的子组件样式，也能游刃有余，一招制敌！

***附录：

在vue文件中嵌套使用子组件时，如果scoped属性选中了，里面的组件是不会被调整到，以为css还有作用域的限制！！！

必须要用deep属性穿透进去才能控制内部嵌套的vant的tabbarItem

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Scoped CSS and Style Penetration Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@latest/lib/index.css" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@latest/lib/vant.min.js"></script>
  <style>
    /* Global styles for the demo */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f8f8f8;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    h1, h2 {
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    .code-block {
      background-color: #f4f4f4;
      border-left: 4px solid #007bff;
      padding: 15px;
      margin-bottom: 20px;
      overflow-x: auto;
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.9em;
      color: #333;
    }
    .example-section {
      margin-bottom: 40px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #fafafa;
    }
    .example-section p {
      line-height: 1.6;
    }
    .parent-component-display, .child-component-display {
      margin-top: 15px;
      padding: 15px;
      border: 1px dashed #ccc;
      border-radius: 4px;
      background-color: #f0f8ff;
    }
    .parent-component-display h3, .child-component-display h3 {
      margin-top: 0;
      color: #007bff;
    }
    .demo-output {
      margin-top: 20px;
      padding: 20px;
      border: 2px dashed #007bff;
      background-color: #e6f7ff;
      text-align: center;
      font-weight: bold;
      color: #007bff;
    }
    .van-tabbar-container {
      margin-top: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div id="app" class="container">
  <h1>0 引言：当 `scoped` 遇上“不听话”的子组件</h1>
  <p>在 Vue.js 的日常开发中，**`scoped` 属性**无疑是我们维护组件样式独立性、避免全局污染的得力助手。它通过为组件的 DOM 元素添加唯一的自定义属性（如 `data-v-xxxxxx`），并相应地修改 CSS 选择器，确保样式只作用于当前组件。一切看起来都那么美好，直到我们尝试在父组件中修改一个来自第三方 UI 库（比如 Vant）或者封装较深的子组件的样式时……</p>

  <p>“为什么我明明在父组件的 `&lt;style scoped&gt;` 里写了样式，子组件就是不生效？！”</p>
  <p>这个熟悉的抓狂场景，相信不少 Vue 开发者都曾经历过。控制台翻来覆去地检查，样式优先级调了又调，子组件却依旧我行我素，仿佛父组件的 `scoped` 样式对它而言只是“耳旁风”。难道是 `scoped` 失效了？还是 Vue 又有什么“隐藏设定”？</p>
  <p>别急，这并不是 Vue 的 bug，而是 `scoped` CSS 作用域限制的正常表现。今天，我们就来深入剖析这个“老大难”问题，并祭出解决它的“神器”——样式穿透选择器 **`::v-deep`** 和 **`:deep()`**。</p>

  ---

  <h1>1 “隔阂”的真相：`scoped` CSS 的边界</h1>
  <p>要理解为什么父组件的 `scoped` 样式默认情况下无法影响子组件，我们首先需要明白 `scoped` 的工作原理。</p>
  <p>当你在 `&lt;style&gt;` 标签上添加 `scoped` 属性时，Vue 的模板编译器会做两件事：</p>
  <ol>
    <li>为当前组件的所有 DOM 元素添加一个唯一的自定义属性，例如 `data-v-f3f3eg9g`。</li>
    <li>将你写的 CSS 选择器进行改写，使其末尾附加这个自定义属性选择器。例如，如果你写了 `.my-class { color: red; }`，它可能会被编译成 `.my-class[data-v-f3f3eg9g] { color: red; }`。</li>
  </ol>
  <p>这样一来，这些样式就只会匹配那些带有特定 `data-v-xxxxxx` 属性的元素，也就是当前组件模板内的元素。</p>
  <p>那么问题来了：子组件的根元素及其内部元素，它们有父组件的那个 `data-v-xxxxxx` 属性吗？</p>
  <p>答案通常是：**没有**（除非子组件的根元素恰好是你通过 `slot` 传入的，并且在父组件模板中）。子组件是它自己的一个独立作用域，它会有属于自己的 `data-v-yyyyyy` 属性（如果它自己也用了 `scoped`）。</p>
  <p>因此，父组件中编译后的 `scoped` 选择器，如 `.child-selector[data-v-parent-hash]`，自然无法匹配到子组件内部的 `.child-selector` 元素，因为子组件的元素上并没有 `data-v-parent-hash` 这个属性。这就是“隔阂”产生的根本原因。</p>

  <div class="example-section">
    <h3>举个例子：</h3>
    <h4>父组件 ParentComponent.vue:</h4>
    <div class="code-block">
      <pre><code>&lt;template&gt;
  &lt;div class="parent-wrapper"&gt;
    &lt;p class="parent-text"&gt;这是父组件的文字&lt;/p&gt;
    &lt;ChildComponent /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent }
}
&lt;/script&gt;

&lt;style scoped&gt;
.parent-wrapper .parent-text {
  color: blue; /* 生效 */
}

/* 尝试修改子组件的样式，通常无效 */
.parent-wrapper .child-text { /* 或者直接写 .child-text */
  color: red !important; /* 通常不会生效 */
}
&lt;/style&gt;</code></pre>
    </div>

    <h4>子组件 ChildComponent.vue:</h4>
    <div class="code-block">
      <pre><code>&lt;template&gt;
  &lt;div class="child-wrapper"&gt;
    &lt;p class="child-text"&gt;这是子组件的文字&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style scoped&gt;
.child-text {
  color: green; /* 子组件自身的 scoped 样式 */
}
&lt;/style&gt;</code></pre>
    </div>
    <p>在上述例子中，父组件尝试设置 `.child-text` 的颜色为红色，但由于 `scoped` 的限制，这个样式不会应用到 `ChildComponent` 内部的 `p` 标签上。</p>

    <div class="demo-output">
      <h3>演示效果 (ParentComponent & ChildComponent):</h3>
      <div class="parent-component-display">
        <h3>父组件内容:</h3>
        <p class="parent-text" :class="{'parent-text-demo': true}">这是父组件的文字 (蓝色)</p>
        <div class="child-component-display">
          <h3>子组件内容:</h3>
          <p class="child-text" :class="{'child-text-demo': true}">这是子组件的文字 (绿色，父组件的红色样式未生效)</p>
        </div>
      </div>
    </div>
  </div>

  ---

  <h1>2 打破壁垒：样式穿透选择器登场</h1>
  <p>为了解决这个问题，Vue 提供了特殊的“深度选择器”或“样式穿透”的机制，允许父组件的 `scoped` 样式“穿透”到子组件。</p>

  <h2>1. `::v-deep` (推荐) / `/deep/` (已废弃，但部分旧项目仍在使用)</h2>
  <p>**`::v-deep`** 是一个伪元素选择器，它可以将其后的选择器的作用域“放宽”，使其能够影响到子组件的内部元素。</p>
  <p>语法：</p>
  <div class="code-block">
    <pre><code>/* 外层选择器 (父组件内的) */
.parent-selector ::v-deep .child-inner-selector {
  /* 你的样式 */
}</code></pre>
  </div>
  <p>修改上面的例子： 父组件 `ParentComponent.vue` 的 `&lt;style scoped&gt;` 部分：</p>
  <div class="code-block">
    <pre><code>&lt;style scoped&gt;
.parent-wrapper .parent-text {
  color: blue;
}

/* 使用 ::v-deep 穿透 */
.parent-wrapper ::v-deep .child-text {
  color: red !important; /* 现在会生效了！ */
}
&lt;/style&gt;</code></pre>
  </div>
  <p>Vue 编译器在处理 `::v-deep` 时，会将 `[data-v-parent-hash]` 这个属性选择器只应用到 `::v-deep` 之前的部分，而之后的部分则保持原样，从而能够选中子组件的元素。例如，上面的代码可能被编译成类似： `.parent-wrapper[data-v-parent-hash] .child-text { color: red !important; }` 注意，这里 `.child-text` 前面没有了父组件的哈希，使得它可以匹配到任何后代元素中拥有 `.child-text` 类名的元素。</p>
  <p>注意： `/deep/` 是 `::v-deep` 的一个别名，在某些 Sass/Less 等预处理器中可能因为无法正确解析 `::v-deep` 而被使用，但它已被废弃，不推荐在新项目中使用。</p>

  <h2>2. `:deep()` (SFC 推荐，CSS 标准草案)</h2>
  <p>随着 CSS 标准的发展，`:deep()` 伪类被提出作为深度选择的更标准方式。在 Vue 3+ 的单文件组件 (SFC) 中，推荐使用 `:deep()`。</p>
  <p>语法：</p>
  <div class="code-block">
    <pre><code>.parent-selector :deep(.child-inner-selector) {
  /* 你的样式 */
}</code></pre>
  </div>
  <p>或者，如果子选择器比较复杂：</p>
  <div class="code-block">
    <pre><code>:deep(.parent-selector .child-inner-selector .another-class) {
  /* 你的样式 */
}</code></pre>
  </div>
  <p>修改例子使用 `:deep()`： 父组件 `ParentComponent.vue` 的 `&lt;style scoped&gt;` 部分：</p>
  <div class="code-block">
    <pre><code>&lt;style scoped&gt;
.parent-wrapper .parent-text {
  color: blue;
}

/* 使用 :deep() 穿透 */
.parent-wrapper :deep(.child-text) {
  color: red !important; /* 同样会生效 */
}
&lt;/style&gt;</code></pre>
  </div>
  <p>`:deep()` 的行为与 `::v-deep` 类似，但它是基于 CSS 标准草案的，更具前瞻性。</p>

  ---

  <h1>实战演练：优雅修改 Vant TabbarItem 样式</h1>
  <p>现在，让我们回到用户在提问中提到的具体场景：在 Vue 文件中嵌套使用 Vant UI 库的 `TabbarItem` 组件时，如果父组件的 `&lt;style&gt;` 标签使用了 `scoped` 属性，直接写的样式是无法调整到 `TabbarItem` 内部元素的。</p>
  <p>假设我们想修改 Vant `TabbarItem` 被选中时的文字颜色和图标颜色。</p>

  <p><strong>目录结构 (示例):</strong></p>
  <div class="code-block">
    <pre><code>src/
├── components/
│   └── MyTabBar.vue (我们的父组件)
└── App.vue</code></pre>
  </div>

  <p>`MyTabBar.vue`:</p>
  <div class="code-block">
    <pre><code>&lt;template&gt;
  &lt;div class="my-custom-tabbar-container"&gt;
    &lt;van-tabbar v-model="active" @change="onChange"&gt;
      &lt;van-tabbar-item icon="home-o"&gt;标签1&lt;/van-tabbar-item&gt;
      &lt;van-tabbar-item icon="search"&gt;标签2&lt;/van-tabbar-item&gt;
      &lt;van-tabbar-item icon="friends-o"&gt;标签3&lt;/van-tabbar-item&gt;
    &lt;/van-tabbar&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import { ref } from 'vue';
import { Tabbar, TabbarItem } from 'vant'; // 假设已按需引入或全局引入

export default {
  name: 'MyTabBar',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup() {
    const active = ref(0);
    const onChange = (index) => console.log(`Tab changed to: ${index}`);
    return { active, onChange };
  },
};
&lt;/script&gt;

&lt;style scoped&gt;
.my-custom-tabbar-container {
  /* 可以给容器加一些自定义样式 */
  border-top: 1px solid #eee;
  padding-top: 10px; /* Adjust for better visibility */
}

/* 错误尝试：直接修改 Vant TabbarItem 内部样式 (通常无效) */
.my-custom-tabbar-container .van-tabbar-item--active .van-tabbar-item__text {
  color: #ff0000 !important; /* 红色 - 在 scoped 下通常不会生效 */
}
.my-custom-tabbar-container .van-tabbar-item--active .van-icon {
  color: #ff0000 !important; /* 红色 - 在 scoped 下通常不会生效 */
}

/* 正确做法：使用 ::v-deep 或 :deep() */
/* 使用 ::v-deep */
.my-custom-tabbar-container ::v-deep .van-tabbar-item--active .van-tabbar-item__text {
  color: #1989fa !important; /* Vant 官方蓝色，或者你想要的任何颜色 */
  font-weight: bold;
}
.my-custom-tabbar-container ::v-deep .van-tabbar-item--active .van-icon {
  color: #1989fa !important;
}

/* 或者使用 :deep() (推荐) */
/*
.my-custom-tabbar-container :deep(.van-tabbar-item--active .van-tabbar-item__text) {
  color: #07c160 !important; // 微信绿
  font-size: 14px;
}
.my-custom-tabbar-container :deep(.van-tabbar-item--active .van-icon) {
  color: #07c160 !important;
}
*/
&lt;/style&gt;</code></pre>
  </div>
  <p>在上面的代码中：</p>
  <ul>
    <li>我们首先尝试了直接通过类名 `.van-tabbar-item--active .van-tabbar-item__text` 来修改激活状态下 `TabbarItem` 的文字颜色，这在 `scoped` 环境下通常是行不通的。</li>
    <li>然后，我们展示了如何使用 **`::v-deep`** (或注释掉的 **`:deep()`**) 来成功穿透 `scoped` 的限制，准确地定位到 Vant 组件内部的类名，并修改其样式。</li>
  </ul>
  <p>关键点：</p>
  <ul>
    <li>你需要通过浏览器的开发者工具检查 Vant (或其他子组件) 内部实际渲染出来的 DOM 结构和类名，才能准确地写出穿透后的选择器。</li>
    <li>为了避免样式冲突和提高特异性，通常会在深度选择器前加上一个父组件特有的类名，如 `.my-custom-tabbar-container`。</li>
  </ul>

  <div class="demo-output">
    <h3>Vant TabbarItem 样式穿透演示:</h3>
    <p>下方 Tabbar 的激活状态文字和图标颜色已被父组件的 `scoped` 样式通过 `::v-deep` 成功修改为蓝色。</p>
    <div class="van-tabbar-container">
      <my-tab-bar></my-tab-bar>
    </div>
  </div>

  ---

  <h1>3 样式穿透：利弊权衡与最佳实践</h1>
  <p>虽然 `::v-deep` 和 `:deep()` 非常强大，但在使用时也需要注意一些事项：</p>

  <h2>优点：</h2>
  <ul>
    <li>**解决燃眉之急：** 能够快速有效地修改封装较深或第三方子组件的样式。</li>
    <li>**灵活性高：** 可以针对性地覆盖子组件的特定样式。</li>
  </ul>

  <h2>缺点与注意事项：</h2>
  <ul>
    <li>**破坏封装性：** 过度或不恰当地使用样式穿透，会使得组件间的样式耦合度增高，违背了 `scoped` CSS 的初衷。</li>
    <li>**维护性降低：** 如果子组件的内部结构或类名发生变化（尤其是第三方库升级时），这些穿透样式可能会失效，导致维护困难。</li>
    <li>**全局污染风险：** 虽然 `::v-deep` 或 `:deep()` 本身是作用在 `scoped` 样式块内的，但如果穿透的选择器不够精确（例如直接 `::v-deep .some-common-class`），它依然可能影响到页面上其他地方拥有相同类名的不相关子组件。</li>
  </ul>

  <h2>最佳实践：</h2>
  <ul>
    <li>**优先考虑组件自身 Props 或 Slots：** 如果子组件提供了用于自定义样式的 `props` (例如 `color`, `fontSize` 等) 或者具名/作用域插槽 (`slots`)，应优先使用这些更规范的方式。</li>
    <li>**精确打击：** 在使用穿透选择器时，务必使其尽可能精确。通常结合父组件的唯一类名来限定穿透的范围，例如 `.my-component ::v-deep .target-class` 而不是直接 `::v-deep .target-class`。</li>
    <li>**谨慎使用 `!important`：** 虽然有时为了覆盖子组件的强样式不得不使用 `!important`，但应尽量避免。优先通过提高选择器特异性来解决。</li>
    <li>**注释说明：** 对于使用了样式穿透的地方，最好添加注释，说明为什么需要这样做以及目标是什么，方便后续维护。</li>
    <li>**考虑 CSS Variables (自定义属性)：** 如果子组件支持通过 CSS Variables 来定制样式，这是一种更优雅且耦合度更低的方式。父组件可以定义 CSS Variables，子组件内部使用这些变量。</li>
  </ul>

  ---

  <h1>4 总结：驾驭 `scoped` 的“任督二脉”</h1>
  <p>`scoped` CSS 是 Vue 组件化开发中保障样式隔离的基石，但其作用域限制有时也会给我们带来挑战，尤其是在处理子组件样式时。通过理解 `scoped` 的原理，并掌握 **`::v-deep`** 和 **`:deep()`** 这两大样式穿透利器，我们就能够有效地打破这种“壁垒”，实现对子组件样式的精准控制。</p>
  <p>记住，技术本身没有好坏，关键在于如何理解和运用。样式穿透虽好，但不可滥用。在追求快速解决问题的同时，更要权衡其对项目封装性和维护性的长远影响。希望这篇文章能帮助你彻底搞懂 Vue 中的样式穿透，让你在未来的开发中，面对再“不听话”的子组件样式，也能游刃有余，一招制敌！</p>

  <h3>***附录：</h3>
  <p>在 Vue 文件中嵌套使用子组件时，如果 `scoped` 属性选中了，里面的组件是不会被调整到的，因为 CSS 还有作用域的限制！必须要用 `::v-deep` (或 `:deep()`) 属性穿透进去才能控制内部嵌套的 Vant 的 `TabbarItem`。</p>
</div>

<script>
  const { createApp, ref } = Vue;
  const { Tabbar, TabbarItem } = vant; // Get Vant components from global vant object

  // ChildComponent definition (for the first example)
  const ChildComponent = {
    template: `
      <div class="child-wrapper">
        <p class="child-text child-text-demo">这是子组件的文字 (绿色)</p>
      </div>
    `,
    name: 'ChildComponent',
    // Simulate scoped CSS for ChildComponent, it won't have parent's data-v-hash
    // In a real SFC, this would be <style scoped>
    mounted() {
      // For demo purposes, manually add a class to distinguish
      const p = this.$el.querySelector('.child-text-demo');
      if (p) p.style.color = 'green';
    }
  };

  // ParentComponent definition (for the first example)
  const ParentComponent = {
    template: `
      <div class="parent-wrapper parent-wrapper-demo">
        <p class="parent-text parent-text-demo">这是父组件的文字 (蓝色)</p>
        <child-component></child-component>
      </div>
    `,
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    // Simulate scoped CSS for ParentComponent
    mounted() {
      const parentText = this.$el.querySelector('.parent-text-demo');
      if (parentText) parentText.style.color = 'blue';

      // Simulate the "failed" attempt to style child from parent scoped
      // This part would be the actual CSS in <style scoped>
      const childTextAttempt = this.$el.querySelector('.child-text-demo');
      if (childTextAttempt && !childTextAttempt.style.color) { // Only if not already colored by child's own style
         // This won't override the green set by ChildComponent's "scoped" style due to scope isolation
         // In a real app, the browser's computed style would still show green
         // For demonstration, we simply don't apply red here if green is already there.
      }
    }
  };

  // MyTabBar component (for the Vant example)
  const MyTabBar = {
    template: `
      <div class="my-custom-tabbar-container">
        <van-tabbar v-model="active" @change="onChange">
          <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
          <van-tabbar-item icon="search">标签2</van-tabbar-item>
          <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
        </van-tabbar>
      </div>
    `,
    name: 'MyTabBar',
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    },
    setup() {
      const active = ref(0);
      const onChange = (index) => console.log(`Tab changed to: ${index}`);
      return { active, onChange };
    },
    // Simulate scoped CSS for MyTabBar component
    // In a real SFC, this would be in <style scoped>
    // Here we use mounted to apply styles directly to demonstrate the "deep" effect
    mounted() {
      // Simulate ::v-deep behavior
      // This will correctly target the Vant internal classes
      const container = this.$el;
      if (container) {
        const activeItemText = container.querySelector('.van-tabbar-item--active .van-tabbar-item__text');
        const activeItemIcon = container.querySelector('.van-tabbar-item--active .van-icon');

        if (activeItemText) {
          activeItemText.style.color = '#1989fa';
          activeItemText.style.fontWeight = 'bold';
        }
        if (activeItemIcon) {
          activeItemIcon.style.color = '#1989fa';
        }
      }
    }
  };


  const app = createApp({
    components: {
      ParentComponent,
      MyTabBar // Register MyTabBar for the Vant example
    }
  });

  app.mount('#app');
</script>

</body>
</html>