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

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》032-组件的Teleport功能

article 2025/1/30 21:41:41

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
🚀一、组件的Teleport功能
- 🔎1.HTML 结构分析
- 🔎2.Vue 应用初始化
- 🔎3.组件定义
- - 🦋3.1 `my-alert` 组件
  - 🦋3.2 `my-alert2` 组件
- 🔎4.Vue 应用挂载
- 🔎5.代码逻辑总结
- 🔎6.实际效果
- 🔎7.总结

🚀前言

在现代前端开发中，组件化设计已成为构建复杂应用的主流方式，而 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，弹窗消失。