返回 导航

Vue.js

hangge.com

Vue.js 3 - teleport组件使用详解

作者：hangge | 2026-08-29 10:18
    在组件化开发中，如果我们封装了一个组件 A，接着在组件 B 中使用组件 A，那么组件 A template 上的元素就会被挂载到组件 B template 上的某个位置。最终，应用程序会形成一个 DOM 树结构。 
    但是在某些情况下，我们希望组件不被挂载到这个组件树上，而是被移动到 Vue.js3 的 app 以外的位置。比如移动到 body 元素上，或除 <div id="app"> 之外的元素上。这个在开发过程中有一个非常常见的场景，例如，创建一个全屏模式的模态框组件，并挂载到 body 上，这时就可以通过 <teleport> 内置组件来完成。下面我将通过样例演示 teleport 组件的使用。

1，基本用法

（1）<teleport> 是 Vue.js 3 提供的内置组件。teleport 是“心灵传输、远距离运输”的意思。类似于 React 中的 Portals，<teleport> 有 to 和 disabled 两个属性：
  • to：指定将其中的内容挂载到的目标元素，可以使用选择器，例如 to="#hangge"。 
  • disabled：是否禁用 teleport 的功能。 

（2）比如下面代码，我们在一个组件内部的 template 中直接使用 <teleport> 内置组件，并为 to 属性赋值 body，即指定将 <teleport> 组件中的内容挂载到 <body> 元素上。 
<template>
    <div>
        <h1>HomeView</h1>
        <teleport to="body">
            <h4>h4挂载到body上，而不是id=app的div上</h4>
        </teleport>
    </div>
</template>

（3）运行效果如下，可以看到 <h4> 元素被挂载到 <body> 上， 而不是 <div id="app"> 元素上。

2，teleport 中嵌套组件

（1）在 <teleport> 内置组件中，除了可以编写 HTML 元素，还可以使用其他的组件，并且可以向这些组件传递数据。这里我们新建一个 Hello World.vue 组件，代码如下：
<template>
  <div class="hello-world">
    <h4>Hello World</h4>
  </div>
</template>

（2）然后在父组件中导入 HelloWorld.vue 组件，并在 <teleport> 组件中使用，代码如下所示： 
<template>
    <div>
        <h1>父组件</h1>
        <teleport to="body">
            <h4>h4挂载到body上，而不是id=app的div上</h4>
            <HelloWorld></HelloWorld>
        </teleport>
    </div>
</template>
<script setup>
import HelloWorld from './HelloWorld.vue';
</script>

（3）运行效果如下，可以看到 <teleport> 组件中的内容都被挂载到 body 上。 

3，多个 teleport 组件的使用

（1）如果将多个 <teleport> 应用到同一个目标元素上（to 值相同），那么应用到目标上的内容会进行合并。例如，对于上面的案例，我们可以拆分成两个 <teleport>：
<template>
    <div>
        <h1>父组件</h1>
        <teleport to="body">
            <h4>h4挂载到body上，而不是id=app的div上</h4>
        </teleport>
        <teleport to="body">
            <HelloWorld></HelloWorld>
        </teleport>
    </div>
</template>
<script setup>
import HelloWorld from './HelloWorld.vue';
</script>

（2）最后运行的效果是一样的。
评论

全部评论（0）

回到顶部