您的当前位置:首页>全部文章>文章详情

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>

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

腾讯云采购季云服务器一折促销