Vue3内置组件补充Teleport

发表于：2024-06-23 16:43:47浏览：111次TAG： #Vue

在组件化开发中，我们封装一个组件A，在另一个组件B中使用：

那么组件A中template的元素，会被挂载到组件B中template的某个位置；
最终我们的应用程序会形成一颗Dom树结构；

但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置:

比如移动到body元素上，或者我们有其他的div#app之外的元素上:
这个时候我们就可以通过teleport来完成;

Teleport是什么呢?

它是一个Vue提供的内置组件，类似于react的Portals;

teleport翻译过来是心灵传输、远距离运输的意思;

它有两个属性:

  1. to
  >  to:指定将其中的内容移动到的目标元素，可以使用选择器;
  2. disabled
  >   disabled:是否禁用 teleport 的功能;

示例代码

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <style>
      #abc{
        border: 1px solid orange;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div id="abc"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

// App.vue

<template>
  <div class="app">
    <suspense>
      <template #default>
        <async-home></async-home>
      </template>
      <template #fallback>
        <h2>Loading</h2>
      </template>
    </suspense>  
  </div>
</template>  
<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))

</script>

<style scoped>

</style>

感谢大家观看，我们下次再见