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

1. 编写弹出框组件
2. 在 App.vue 中使用
3. 使用 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组件就可以解决。