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组件的使用了。

以上关于11. Teleport瞬间移动函数的使用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。