Vue3新特性之 Teleport

前言

       作为经济寒冬下失业小菜鸡一员，在面试华润前端开发一职的时候，与面试官谈到Vue3新特性时，面试官居然把Vue2中的实例挂载（render） 等同于Vue3中的 teleport。和我说到我们的render也可以全局挂载。。。为什么要用你的teleport？？？我的天？都快2023年了为什么还有人没理解什么是teleport.

所以今天讲一个Vue3实用性比较大的一个新特性(TelePort)。以至于不要别人一问啥也不知道，只是到是传送门，具体传送啥，是啥也不知道。所以今天开个小课讲讲这个是啥！！！！

正文

• 1.teleport 到底是啥？
• 2.teleport 能帮我们解决些啥？
• 3.代码的应用编写

TelePort是啥？

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。使我们开发的东西不只在我们对应的页面之下。

      场景呢？ 例如我们开发过程中会经常写一些 common组件，举个栗子：dialog  等全局性的组件。例如以下vue2例子写法与问题的所在。

 src/components/myDialog/index.vue 

我们会写成的全局组件供项目中使用。这是一个简单的Vue2的组件写法。点击打开蒙版，点击关闭蒙版。

//主页面代码

<template>  <div class="">    <button @click="loginSuccess">登录成功</button>    <button @click="toOpenMask">打开mask</button>    <com-dialog :isOpen="isOpen" @setShow="setShow"></com-dialog>  </div></template><script>import { useRouter } from "vue-router";import { toRefs, reactive } from "vue";export default {  setup() {    const router = useRouter();    const loginSuccess = () => {      console.log(router);      router.replace({        path: "/",      });    };    const obj = reactive({      isOpen: false,    });    const toOpenMask = () => {      obj.isOpen = true;    };    const setShow = () => {      obj.isOpen = false;    };    return {      ...toRefs(obj),      loginSuccess,      toOpenMask,      setShow,    };  },};</script>

// Mask组件代码

<template>  <div class="mask-box" @click="closeMask" v-if="isOpen">    <a>我是蒙版，点击消失</a>  </div></template><script>import { reactive, toRefs } from "vue";export default {  props: {    isOpen: false,  },  setup(props, context) {    const state = reactive({      toClose: false,    });    const closeMask = () => {      //点击关闭      context.emit("setShow", false);    };    return {      ...toRefs(state),      closeMask,    };  },};</script><style lang="scss" scoped>  .a{}</style>

此时我们的 蒙版Mask是存在于 我们的

里面的。这样就形成了父子组件的样式，其实是没有独立性的。

vue3的出现 提供了teleport特性更新。

在主页面中的 组件引入处添加 teleport标签，在标签中添加我们自己的组件
<teleport to="#my-teleport">
    <com-dialog></com-dialog>
</teleport>

在App.vue 中我们要展示的地方添加我们要展示的位置
<div>
    <div id="app">
        <vue-router/>    
    </div>
    <div id="my-teleport"></div>  </div>

 1.这边我们在我们要穿梭展示的地方定义一个新的位置（这里是app.vue中）
 2.切记这里的id要和 我们 to="#XXXXX" 这个是一致的。 这边的 to 的含义 就是把我们的组件传送到我
们这个id为“my-teleport”中。

如下图展示 我们把我们的组件传送到与 id="app"的 根布局同级了。他在body里面，又独立与 app之外，但是他依旧能受到我们app里面的控制。

这也意味着来自父组件的注入按预期工作，并且子组件将嵌套在外面的父组件之下，而不是放在实际内容移动到的位置。这才更加有独立性。

总结：

本文主要介绍了 Vue 3 的新特性——Teleport，从为什么要使用 Teleport，以及通过代码和截图的演示，希望能够对大家有帮助。如有不足之处，请留言指导探讨。