今天咱来聊聊Teleport这个东西，听名字是不是感觉挺玄乎？“传送”？没错，就是这个意思！
我也不太明白这玩意儿有啥用。你想，在Vue2的时候，咱写组件，那都是一层套一层的，就像俄罗斯套娃似的。每个组件都有自己的地盘，老老实实待在自己的位置上。
但是！有些时候，这种“规矩”就让人挺难受的。举个最常见的例子，就是弹窗（dialog）。
你想，弹窗这东西，理论上应该是盖在整个页面最上层的，对？结果，因为组件嵌套的关系，它只能待在自己的“父组件”里面。这就会导致什么问题？
- 样式不好调。你想给弹窗加个绝对定位，让它盖住整个页面？不好意思，它可能只能盖住它爹的那一小块地方。
- 层级关系混乱。万一你爹的层级比别人低？那你的弹窗就可能被别人盖住，这不就尴尬？
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
为解决这个问题，以前我们都是咋干的？
- 手动把弹窗的DOM节点挪到body下面。这活儿干起来可真够呛，麻烦不说，还容易出bug。
- 用一些第三方的库。虽然能省点事，但总感觉不够优雅，而且还得额外学点东西。
现在好，Vue3 带来 Teleport，这下子问题就迎刃而解！
我第一次用 Teleport 的时候，那感觉，真是眼前一亮！
我记得当时我就是想做一个弹窗组件。按照以前的做法，我得费老鼻子劲去处理 DOM 节点的位置。但是有 Teleport，我只需要这么干：
我在我的弹窗组件里面，把需要“传送”的内容，用<teleport>标签包起来。
然后，我在<teleport>标签上，加一个 to 属性，指定我要把内容“传送”到哪里。通常，我会直接写 to="body"，意思就是把内容直接扔到 body 标签下面。
就这么简单两步，我的弹窗组件就“嗖”的一下，被“传送”到 body 下面去！再也不用担心层级关系、样式冲突这些乱七八糟的问题！
我当时还特意打开浏览器的开发者工具，仔细看看。你猜怎么着？
我的弹窗组件，原本应该在层层嵌套的DOM结构里面的，现在直接跑到 body 下面去！而且在原来的位置，还留下两个注释节点，写着“teleport start”和“teleport end”。
这感觉，就像是我的弹窗组件真的会“瞬间移动”一样！
后来为搞清楚 Teleport 到底是怎么实现的，我还特意去翻翻源码（我承认我没怎么看懂……）。
大概的意思就是，Vue3 在渲染的时候，如果遇到<teleport>标签，就会把里面的内容，动态地挂载到 to 属性指定的那个 DOM 节点上。
Teleport 这东西，真是太好用！它让我们可以更灵活地控制组件的渲染位置，再也不用被组件的嵌套关系束缚手脚！
自从用 Teleport，我写代码都感觉更顺畅，腰不酸，腿不疼，一口气能写五个弹窗，不费劲！
