登录
Vue 的 :deep/:global/:slotted 怎么转成 React ？一份对照指南？
VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 作用域样式中的穿透选择器（:deep/:global/:slotted）经过 VuReact 编译后会变成什么样的 React 代码？
前置约定
为避免示例代码冗余导致理解偏差，先明确两个小约定：
- 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
- 默认读者已熟悉样式
:deep/:global/:slotted的用法。
编译对照
:global()：声明全局样式
:global() 用于在 scoped 样式中声明一段不受作用域限制的全局样式。VuReact 的处理方式：移除 :global() 包装，保留内部选择器原样输出。
- Vue 代码：
<!-- Component.vue -->
<template>
<div class="component">
<div class="global-class">全局类</div>
</div>
</template>
<style scoped>
.component {
:global(.global-class) {
color: green;
}
}
</style>
- VuReact 编译后 CSS：
/* component-abc123.css */
.component[data-css-abc123] {
.global-class {
color: green;
}
}
从示例可以看到：:global(...) 被完全移除，内部的选择器照常展开，且不添加 scope 属性。这样 .global-class 就是一个全局可用的样式类。
:deep()：样式穿透
:deep() 是 scoped 样式中最常用的穿透选择器，用于让父组件的样式能够影响子组件内部的元素。VuReact 的处理策略是：将 :deep(...) 左侧的选择器加上 scope，右侧（:deep 内部）的选择器保持原样。
在嵌套规则中使用 :deep()
- Vue 代码：
<!-- Component.vue -->
<template>
<div class="component">
<div class="nested-component">深层嵌套组件</div>
</div>
</template>
<style scoped>
.component {
:deep(.nested-component) {
background: yellow;
}
}
</style>
- VuReact 编译后 CSS：
/* component-abc123.css */
.component[data-css-abc123] {
& .nested-component {
background: yellow;
}
}
从示例可以看到：在嵌套规则中，:deep() 左侧是 .component（加 scope），右侧 .nested-component（不加 scope）。
在单行规则中使用 :deep()
:deep() 也可以在非嵌套的单行规则中使用，左侧部分仍然被 scoped。
- Vue 代码：
<style scoped>
.parent :deep(.btn) { color: red; }
</style>
- VuReact 编译后 CSS：
.parent[data-css-abc123] .btn { color: red; }
:deep() 紧贴选择器
- Vue 代码：
<style scoped>
.parent:deep(.btn) { color: red; }
</style>
- VuReact 编译后 CSS：
.parent[data-css-abc123] .btn { color: red; }
带组合器的 :deep()
- Vue 代码：
<style scoped>
.parent > :deep(.btn) { color: red; }
</style>
- VuReact 编译后 CSS：
.parent[data-css-abc123] > .btn { color: red; }
:deep() 作为选择器起始
当 :deep() 位于选择器最左侧时（无左侧部分），VuReact 会直接用 [scopeId] 作为左侧。
- Vue 代码：
<style scoped>
:deep(.btn) { color: red; }
</style>
- VuReact 编译后 CSS：
[data-css-abc123] .btn { color: red; }
处理逻辑：左侧为空时，用 [data-css-abc123] 自身作为 scoped 占位。
:deep() 展开逗号选择器
:deep() 内部可以包含多个逗号分隔的选择器，VuReact 会逐一展开。
- Vue 代码：
<style scoped>
.a :deep(.x, .y) { color: red; }
</style>
- VuReact 编译后 CSS：
.a[data-css-abc123] .x, .a[data-css-abc123] .y { color: red; }
从示例可以看到：:deep(.x, .y) 被展开为两个独立的选择器 .x 和 .y，各自与左侧 .a[data-css-abc123] 拼接。
4. :slotted()：插槽样式
:slotted() 用于为插槽传入的内容设置样式，VuReact 当前的处理方式是简单解包。
- Vue 代码：
<style scoped>
.component {
:slotted(.slotted-content) {
display: flex;
}
}
</style>
- VuReact 编译后 CSS：
.component[data-css-abc123] {
.slotted-content {
display: flex;
}
}
从示例可以看到：:slotted(...) 被移除，内部选择器 .slotted-content 保留，但不加 scope。完整的 :slotted() 语义支持仍在解决中。
复杂选择器共存
在一个组件中，:global、:deep、:slotted 可以与标准 scoped 选择器以及伪类（:hover、::before 等）混合使用。
- Vue 代码：
<style scoped>
.component {
&:hover { opacity: 0.8; }
&.active { font-weight: bold; }
:global(.global-class) { color: green; }
:deep(.nested-component) { background: yellow; }
:slotted(.slotted-content) { display: flex; }
&:not(:first-child) { margin-top: 20px; }
&:nth-child(2n) { background: #f0f0f0; }
&::before { content: '→'; }
&::placeholder { color: gray; }
}
</style>
- VuReact 编译后 CSS：
.component[data-css-abc123] {
&:hover { opacity: 0.8; }
&.active { font-weight: bold; }
.global-class { color: green; }
& .nested-component { background: yellow; }
.slotted-content { display: flex; }
&:not(:first-child) { margin-top: 20px; }
&:nth-child(2n) { background: #f0f0f0; }
&::before { content: '→'; }
&::placeholder { color: gray; }
}
共处规则：
| 选择器类型 | 行为 | scope 注入 |
|---|---|---|
| 标准选择器 | 尾部追加 [data-css-xxx]
|
✅ |
| 伪类/属性选择器 | 保持原样，插入 scope 在其之前 | ✅ |
:global(...) |
移除包装，内部不加 scope | ✅ |
:deep(...) |
左侧加 scope，内部不加 | ✅ |
:slotted(...) |
移除包装，内部不加 scope | ⚠️（待完善） |
编译策略总结
VuReact 的作用域样式穿透选择器编译策略展示了完整的 scoped 选择器转换能力：
-
:global()转换：移除:global(...)包装，内部选择器按全局样式输出，不加 scope -
:deep()转换：将选择器按:deep(...)位置切割，左侧加 scope，内部保持穿透能力，支持嵌套、组合器、逗号展开等复杂场景 -
:slotted()转换：移除:slotted(...)包装，内部选择器保持原样（完整语义实现 WIP） -
伪类兼容：
:hover、::before、:not()、:nth-child()等伪类保持原样，scope 只插入在伪类之前 -
嵌套兼容：与 SCSS/Less 的
&嵌套语法协作良好
支持的穿透选择器：
| 选择器 | 状态 | 说明 |
|---|---|---|
:deep() |
✅ 完整支持 | 左侧 scoped + 右侧穿透 |
:global() |
✅ 完整支持 | 移除包装，全局样式 |
:slotted() |
⚠️ 部分支持 | 解包处理，完整语义待完善 |
VuReact 的编译策略确保了从 Vue 到 React 的平滑迁移。编译后的 CSS 选择器既保持了 Vue scoped 样式的作用域隔离语义，又能通过 :deep() 和 :global() 灵活控制样式穿透范围，让迁移后的应用保持完整的 scoped 样式能力。
🔗 相关资源
- VuReact 官方文档：语义编译对照总览
- Github：github.com/vureact-js/…
✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！
