P11: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组件就可以解决。

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

组件已经挂载到model节点

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P11:Teleport瞬间移动函数的使用

发表评论

提供最优质的资源集合

立即查看 了解详情