文章目录
- 前言
- 一、Teleport是什么？
- 为啥会有这个组件
- 二、使用步骤
- 总结
前言
在 Vue 3 中， 是一个内置组件，用于将模板的一部分内容渲染到 DOM 中的其他位置，而不是当前组件的默认挂载点。这对于实现模态框、通知、工具提示等需要脱离父组件层级进行渲染的场景非常有用。
一、Teleport是什么？
是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
为啥会有这个组件
当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：
position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点
设置动画，就会不小心破坏模态框的布局！
图解：
我们可以看见模态框居中了，这就是使用了这个组件的效果
没有用这个组件，发现居中失效了
图解：
我们可以看见模态框居中了，这就是使用了这个组件的效果
没有用这个组件，发现居中失效了
二、使用步骤
包裹一下用这个组件就行了
代码如下（示例）：
<Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport>
总结
通过 ，你可以更灵活地控制组件的渲染位置，提升用户体验和代码的可维护性。
