「Vue系列」欢迎传送到“Teleport”星球

前言

大家好，我是落叶小小少年，我一直谨记学习不断，分享不停，输入的最好方式是输出，我始终相信

• 用最核心代码更容易理解深的技术点
• 用通俗易懂的话，讲难的知识点

之前有学习并写了KeepAlive组件的实现原理，后来打算也把Teleport组件的原理也学习并记录下来，于是这几天便学习了下Teleport组件的实现原理，现在分享给大家，希望能和大家共同学习，进步

Tips: 这样面试的时候你就可以信心满满的向面试官讲解这个知识点了🫣

Teleport是什么

Teleport 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去

Teleport组件的功能

1. 不用有什么问题

想象一下如果你需要一个模态框的功能，这个组件的模板app组件内，但从整个应用试图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方
假设我们有一个模态框，并且是下面这样的写法

  

1
2
3

这个MyModel组件是一个模态框，并且会被渲染到class为outer的的div标签下,但是我们通常希望这个模态框的蒙层能过遮挡页面上的任何元素

那么我们把这个组件的z-index设置的最高，但是问题是模态框的z-index会受限于它的容器元素，如果有其他元素与

  

    
Hello from the modal!
  

1
2
3
4
5

type TeleportProps = {
   
  to: string | RendererElement | null // string或者已渲染的目标元素
  disabled?: boolean
}
export const
1
2
3
4
5