当前位置：首页 > news >正文

vue3中解决组件间 css 层级问题最佳实践（Teleport的使用）

news 2025/2/24 10:44:45

定义：

<Teleport> 是 Vue 3 中引入的一个内置组件，用于将组件的内容渲染到 DOM 中的指定位置，而不受组件层级结构的限制。这在处理模态框、通知、下拉菜单等需要脱离当前组件层级的情况下非常有用。

通俗来说，Teleport的功能是将当前组件挂载到应用的顶层，与App组件同级。这样做的原因是，如果一个组件嵌套在Vue应用的内部，处理这个组件的定位、z-index以及样式会变得相当棘手。通过使用Teleport，可以轻松解决组件之间的CSS层级问题，使得样式管理更加简便有效。这种方式不仅简化了布局设计，还避免了因层级嵌套带来的样式冲突或覆盖问题。

使用：

   <Teleport to="body"><add-dialog>这是一个需要改变层级的弹窗</add-dialog></Teleport>

<Teleport> 组件包含两个主要的属性：

to: 指定目标容器，可以是一个 CSS 选择器字符串或一个 DOM 元素。

disabled: 可选属性，用于控制是否禁用 Teleport。如果为 true，内容将不会被传送到目标容器，而是在原地渲染。

多个teleport还可以挂载到同一个元素下

<Teleport to="body"><add-dialog>这是第一个需要改变层级的弹窗</add-dialog>
</Teleport>
<Teleport to="body"><user-dialog>这是第二个需要改变层级的弹窗</user-dialog>
</Teleport>

多个 <Teleport> 组件可以将其内容依次挂载到同一个目标元素上，按照先后顺序追加，后挂载的内容将放置于目标元素下的更靠后位置。

总结：

<Teleport> 是 Vue 3 中一个非常强大的工具，特别适合处理那些需要脱离当前组件层级的 UI 元素。通过 Teleport，你可以更灵活地控制组件的渲染位置，而不必担心 DOM 结构的限制。

拓展：

vue3中新增了哪些新的内置组件和特性？

Vue 3 引入了一些新的内置组件和特性，但并没有新增大量的 HTML 标签。Vue 3 的核心仍然是基于现有的 HTML 标签和自定义组件。以下是 Vue 3 中新增的主要内置组件和特性：

1. `<Teleport>`

作用: 将组件的内容渲染到 DOM 中的指定位置，而不受组件层级结构的限制。
使用场景: 模态框、通知、下拉菜单等需要脱离当前组件层级的情况。
示例:

<Teleport to="body"><div class="modal">这是一个模态框</div>
</Teleport>

2. `<Suspense>`

作用: 用于处理异步组件的加载状态，提供 fallback 内容（如加载动画）直到异步组件加载完成。
使用场景: 异步组件、异步数据加载等。
示例:

<Suspense><template #default><AsyncComponent /></template><template #fallback><div>加载中...</div></template>
</Suspense>

3. `<Fragment>`

作用: Vue 3 默认支持多根节点组件（Fragment），不再需要包裹一个单独的根元素。
使用场景: 简化模板结构，避免不必要的包裹元素。
示例:

<template><div>第一个元素</div><div>第二个元素</div>
</template>

4. `v-model` 的增强

Vue 3 对 v-model 进行了改进，支持多个 v-model 绑定，并且可以自定义修饰符。
示例:

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

5. `<script setup>` 语法糖

作用: 简化 Composition API 的使用，使代码更简洁。
使用场景: 单文件组件（SFC）中使用 Composition API。
示例:

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script><template><button @click="count++">{{ count }}</button>
</template>

6. `<style scoped>` 的改进

Vue 3 支持在 <style scoped> 中使用深度选择器 :deep()，用于样式穿透。
示例:

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

7. `<Transition>` 和 `<TransitionGroup>` 的改进

Vue 3 对过渡动画组件进行了优化，支持更多的动画场景和配置。
示例:

<Transition name="fade"><div v-if="show">内容</div>
</Transition>

8. `<KeepAlive>` 的改进

Vue 3 对 <KeepAlive> 组件进行了增强，支持更细粒度的缓存控制。
示例:

<KeepAlive :include="['ComponentA', 'ComponentB']"><component :is="currentComponent" />
</KeepAlive>

9. `<component>` 的改进

Vue 3 中 <component> 支持动态组件切换，并且可以结合 v-model 使用。
示例:

<component :is="currentComponent" v-model="data" />

10. `v-bind` 的 CSS 变量支持

Vue 3 允许在 <style> 中使用 v-bind 绑定组件的响应式数据。
示例:

<template><div class="text">Hello</div>
</template><script setup>
import { ref } from 'vue';
const color = ref('red');
</script><style scoped>
.text {color: v-bind(color);
}
</style>

总结

Vue 3 并没有新增大量的 HTML 标签，而是通过引入新的内置组件（如 <Teleport> 和 <Suspense>）以及对现有特性的增强（如 v-model、<script setup> 等）来提升开发体验和功能灵活性。这些新特性使得 Vue 3 更加强大和现代化。

中国在各个前端框架中使用的比例大概是多少？

截至到 2023 年，中国的前端开发技术栈中，主流的前端框架（如 React、Vue 和 Angular）的使用比例大致如下。需要注意的是，这些数据是基于行业趋势、开发者社区调查、招聘需求以及技术论坛的讨论得出的估算，并非官方统计数据。

1. Vue

使用比例: 约 50%-60%

原因:

Vue 由中国开发者尤雨溪创建，在中国拥有强大的社区支持和广泛的开发者基础。

Vue 的学习曲线较低，文档友好，特别适合中小型项目和快速开发。

许多中国企业（如阿里巴巴、腾讯、字节跳动等）在其部分项目中广泛使用 Vue。

Vue 3 的发布进一步提升了其性能和开发体验，吸引了更多开发者。

2. React

使用比例: 约 30%-40%

原因:

React 是全球最流行的前端框架之一，在中国也有大量用户。

React 的生态系统非常强大，适合构建大型复杂应用。

许多国际化企业和中国的大型互联网公司（如字节跳动、美团、滴滴等）在其核心项目中采用 React。

React 的高灵活性和性能优势使其在需要高度定制化的项目中更受欢迎。

3. Angular

使用比例: 约 5%-10%

原因:

Angular 在中国市场的使用比例相对较低，主要集中在对 TypeScript 有强需求的企业或大型项目中。

Angular 的学习曲线较陡，适合需要强类型支持和完整解决方案的企业级应用。

一些传统企业或金融行业可能会选择 Angular，但在互联网公司中占比不高。

4. 其他框架（如 Svelte、SolidJS 等）

使用比例: 约 1%-5%

原因:

新兴框架（如 Svelte、SolidJS）在中国仍处于探索阶段，使用比例较低。

这些框架通常被用于小型项目或实验性项目中，尚未大规模普及。

5. 原生 JavaScript 或 jQuery

使用比例: 约 5%-10%

原因:

在一些传统企业或老旧项目中，仍然使用原生 JavaScript 或 jQuery。

随着现代前端框架的普及，这部分比例正在逐渐减少。