11. Teleport瞬间移动函数的使用

Teleport在国内大部分都翻译成了瞬间移动组件，个人觉得不太好理解。我把这个函数叫独立组件，它可以把你写的组件挂载到任何你想挂载的 DOM 上，所以说是很自由很独立的。 在使用Vue2的时候是作不到的。

编写弹出框组件

为了更好的演示和复习，先编写一个弹出框组件，本文我们只实现显示就好，其它的显示、隐藏功能先不做。 在/src/components/目录下，创建一个Modal.vue的组件，组件代码很简单。

<template>
  <div id="center">
    <h2>码云笔记</h2>
  </div>
</template>
<script lang="ts">
export default {};
</script>
<style>
#center {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  background: white;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
</style>

这样组件就编写好了，这段代码非常简单，多数都在 CSS 样式层面，而样式学习不是我们的重点，你完全可以复制。

在 App.vue 中使用

组件写好后，在 App.vue 中使用就非常简单了，先引入这个，然后声明为component就可以了。

//...
import modal from "./components/Modal.vue";
const app = {
  name: "App",
  components: {
    modal,
  },
  //...
}
//...

这样就可以在template中进行使用了<model />。写完后，你可以用npm run serve开启服务，并在浏览器中使用http://localhost:8080/查看结果。 在看结果时，你会发现所有的 Dom 都是在 app 节点下的，如果你想改变节点，在 Vue2 时代这非常困难。但是在Vue3.x时代，只需要使用Teleport组件就可以解决。

这样包裹遇到的问题

1. Dialog 被包裹在其它组件之中，容易被干扰
2. 样式也在其它组件中，容易变得非常混乱

使用 Teleport 函数(方法)

Teleport方法，可以把Dialog组件渲染到你任意想渲染的外部 Dom 上，不必嵌套再#app里了，这样就不会互相干扰了。你可以把Teleport看成一个传送门，把你的组件传送到你需要的地方。 teleport组件和其它组件没有任何其它的差异，用起来都是一样的。

使用的第一步是把你编写的组件用<teleport>标签进行包裹，在组件上有一个to属性，这个就是要写你需要渲染的DOMID 了。

<template>
  <teleport to="#modal">
    <div id="center">
      <h2>码云笔记</h2>
    </div>
  </teleport>
</template>

然后我们在打开/public/index.html,增加一个model节点。

<div id="app"></div>
<div id="modal"></div>

这时候在浏览器中预览，就会发现，现在组件已经挂载到model节点上了，这就是teleport组件的使用了。