【愚公系列】《循序渐进Vue.js 3.x前端开发实践》032-组件的Teleport功能
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代前端开发中，组件化设计已成为构建复杂应用的主流方式，而 Vue.js 作为一款流行的框架，提供了许多强大的功能来提升开发效率和用户体验。其中，Teleport 作为 Vue 3 引入的新特性，极大地丰富了组件的使用场景，使得开发者能够更灵活地处理 DOM 结构和组件渲染。
Teleport 功能允许我们将组件的内容渲染到 DOM 的任意位置，而不仅仅是其父组件的上下文中。这一特性在构建模态框、提示框、上下文菜单等场景时尤为重要，因为这些场景通常需要将元素渲染到页面的特定位置，以避免层级问题或样式冲突。
🚀一、组件的Teleport功能
🔎1.HTML 结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件自定义指令</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style> </style>
</head>
<body>
<div id="Application">
<div style="position: absolute; width: 50px;">
<my-alert2></my-alert2>
<my-alert></my-alert>
</div>
</div>
<script>
...
</script>
</body>
</html>
<div id="Application">：Vue 应用将会挂载到这个div元素上。<my-alert2></my-alert2>和<my-alert></my-alert>：这两个是自定义的 Vue 组件，它们会被 Vue 渲染成具体的 HTML 结构。<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的 CDN，供后续使用。
🔎2.Vue 应用初始化
const {createApp, ref} = Vue
const App = createApp({})
createApp({})：创建一个新的 Vue 应用实例App。ref：这是 Vue 3 中的一种响应式引用方法，用于定义响应式数据。
🔎3.组件定义
🦋3.1 my-alert 组件
App.component("my-alert", {
template: `
<div>
<button @click="show = true">弹出弹窗</button>
</div>
<teleport to="body">
<div v-if="show" style="text-align: center;padding:20px; position:absolute;top: 30%; left:30%; width:40%; border:black solid 2px; background-color:white">
<h3>弹窗</h3>
<button @click="show = false">隐藏弹窗</button>
</div>
</teleport>
`,
setup() {
const show = ref(false)
return { show }
}
})
App.component("my-alert", {...})：定义了一个名为my-alert的组件。my-alert组件有一个按钮，点击时弹出一个弹窗。template：<button @click="show = true">弹出弹窗</button>：点击按钮时会将show设置为true，从而显示弹窗。<teleport to="body">：这是 Vue 3 新增的功能。teleport允许将组件的 DOM 移动到指定的 DOM 节点（在这个例子中是<body>）。这是一个常用于弹窗、浮动元素等的场景，可以避免被父容器的 CSS 样式影响。<div v-if="show">：弹窗的显示与否取决于show的值，show是通过ref(false)来定义的初始值为false，点击按钮后变为true，从而触发弹窗的显示。- 弹窗中有一个按钮，用于将
show设置为false，从而关闭弹窗。
🦋3.2 my-alert2 组件
App.component("my-alert2", {
template: `
<div>
<button @click="show = true">弹出弹窗</button>
</div>
<div v-if="show" style="text-align: center;padding:20px; position:absolute;top: 30%; left:30%; width:40%; border:black solid 2px; background-color:white">
<h3>弹窗</h3>
<button @click="show = false">隐藏弹窗</button>
</div>
`,
setup() {
const show = ref(false)
return { show }
}
})
my-alert2组件：与my-alert组件非常相似，区别在于没有使用teleport，它的弹窗会直接渲染在当前组件的 DOM 树中。- 弹窗同样是通过
v-if="show"控制显示与隐藏，点击按钮时，show被设置为true，显示弹窗；点击隐藏按钮时，show被设置为false，隐藏弹窗。
🔎4.Vue 应用挂载
App.mount("#Application")
App.mount("#Application")：将 Vue 应用挂载到 HTML 页面中的id="Application"元素上，开始渲染页面。
🔎5.代码逻辑总结
-
组件定义：
my-alert和my-alert2都是自定义 Vue 组件，包含一个按钮来显示弹窗，弹窗中有一个按钮来关闭弹窗。- 它们的核心区别在于：
my-alert使用了 Vue 3 的 Teleport 功能将弹窗渲染到body元素下，而my-alert2则直接在其父组件中渲染弹窗。
-
响应式数据：
show是每个组件内部的响应式状态，控制弹窗的显示与隐藏。ref(false)用于初始化show，并通过按钮的点击事件修改其值。
-
Teleport 使用：
my-alert组件使用了 Teleport，这意味着弹窗的 DOM 不会被插入到my-alert组件的 DOM 树中，而是被传送到body元素下。这样可以避免父组件的样式或布局对弹窗的影响。
-
弹窗显示与隐藏：
- 通过
v-if="show"控制弹窗的显示与隐藏。show是响应式的，当其值为true时弹窗显示，点击隐藏按钮时show设置为false，弹窗消失。
- 通过
🔎6.实际效果
my-alert弹窗：点击弹窗按钮后，弹窗会显示在页面的body中，而不会被当前组件的 CSS 样式影响。my-alert2弹窗：点击弹窗按钮后，弹窗会直接渲染在my-alert2组件内，并受到父级样式的影响。
🔎7.总结
- 该代码展示了 Vue 3 中的 组件 和 Teleport 使用方法。通过自定义组件来实现可复用的弹窗功能，同时
Teleport使得弹窗可以脱离当前组件的 DOM 结构，渲染到更高层次的 DOM 节点中，避免受到父容器的布局影响。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）