跳到主要内容

🎯 Vue scoped 样式穿透机制

⚠️ 本文针对 Vue 3。

🧩 一、scoped 样式到底怎么工作的？​

当你在 Vue 文件中写下：

<style scoped>
.box {
  color: red;
}
</style>

Vue 会在编译时自动把这个 CSS 转换成带作用域的选择器，比如：

.box[data-v-aaa111] {
  color: red;
}

同时它也会把你的 HTML 编译成：

<div class="box" data-v-aaa111></div>

这就实现了样式只在当前组件生效的隔离效果。

❓ 二、都 scoped 了，父组件为啥还能影响子组件？​

场景还原：​

<!-- 父组件 -->
<template>
  <ChildBox />
</template>

<style scoped>
.box {
  border: 1px solid red;
}
</style>
<!-- 子组件 ChildBox.vue -->
<template>
  <div class="box">子组件 box</div>
</template>

<style scoped>
.box {
  background: lightblue;
}
</style>

你以为 .box 样式互不影响，结果页面上 .box 同时有 红色边框和蓝色背景？

🤯 原因揭秘：​

Vue 的 scoped 是通过给元素加一个特殊属性实现的，比如：

<div class="box" data-v-child data-v-parent></div>

当一个组件渲染在父组件中时，最终生成的 DOM 是带有两个作用域属性的，比如：

  • 父组件作用域：data-v-parent
  • 子组件作用域：data-v-child

这样，父组件写的 .box[data-v-parent] 就会匹配到子组件里的 div.box，导致样式“穿透”。

✅ 三、避免样式冲突的最佳实践​

  1. 避免组件内使用通用 class 名称（如 .box, .wrapper）
  2. 给组件 class 加命名空间
<!-- ❌ 不推荐 -->
<div class="box"></div>

<!-- ✅ 推荐 -->
<div class="my-component-box"></div>

🎯 四、那真正的样式隔离怎么办？用 :deep()​

如果你就是要让父组件控制子组件样式，就该显式地告诉 Vue：

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

这样 Vue 就不会对 .box 加上 data-v-xxx 作用域限制，从而达到穿透目的。

🎁 五、slot 样式怎么控制？用 ::v-slotted()​

插槽内容是在父组件中写的，子组件控制它们样式时必须用：

<!-- 子组件 -->
<template>
  <div class="wrapper">
    <slot />
  </div>
</template>

<style scoped>
::v-slotted(.title) {
  font-size: 20px;
  color: green;
}
</style>
<!-- 父组件 -->
<ChildBox>
  <div class="title">我是插槽内容</div>
</ChildBox>

✅ ::v-slotted 是子组件控制插槽内容的唯一合法方式。

✨ 六、总结表格​

使用场景正确写法说明
父组件影响子组件:deep(.xxx)明确样式穿透
子组件影响插槽内容::v-slotted(.xxx)控制插槽
防止样式冲突命名空间 class.my-box
不希望穿透保持不同 class + scoped默认行为

🧠 最后一句话总结​

scoped 是“基于标签属性的样式隔离机制”，它不是沙箱，也不是全封闭系统，理解其工作原理、配合 :deep() 和 ::v-slotted()，你就能写出结构清晰、样式干净的 Vue 组件。