Vue3 Teleport实践及原理详解，如何应用于复杂组件间通信？

本文共计1779个文字，预计阅读时间需要8分钟。

Vue3的组合式API和基于Proxy的响应式原理已有众多文章介绍，除了这些比较明显的更新外，Vue3还新增了一个内置组件：Teleport。该组件的主要作用是将模板内的DOM元素移动到指定的位置。

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新，Vue3 还新增了一个内置组件： Teleport 。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。

使用场景

业务开发的过程中，我们经常会封装一些常用的组件，例如 Modal 组件。相信大家在使用 Modal 组件的过程中，经常会遇到一个问题，那就是 Modal 的定位问题。

话不多说，我们先写一个简单的 Modal 组件。