比较常见的应用场景:就是全屏的模态框,控制元素的位置,也是可以处理的,但是比较麻烦
在理想情况下,我们希望在具体的组件中,给元素绑定的事件,与具体要控制的DOM元素结构在同一个组件中,具体的位置处,保持一定的相关联性...而不用特意的把一些DOM结构给分离出去,然而,在同一组件中,触发模态框的按钮和模态框本身在同一组件中
因为他们都与组件的开关状态有相关联,模态框与按钮一起渲染在应用DOM结构很深的地方,会导致模态框的...button按钮来触发打开当前组件的模态框,里面存在着控制弹框的显示和隐藏的逻辑,当嵌套的组件比较深,复杂时
如果父级元素存在定位,那在控制子元素的位置时,用css的transform或者position...:absolute,参照对象的变更,会破坏布局结构,会出现一些css样式
控制的问题,解决起来会非常的痛苦
那这个Teleport组件就是为了解决这类问题,可以将指定的DOM结构片段,独立于到组件外面去...,目标元素必须存在,即,目标不能由组件本身呈现,理想情况下应该位于整个Vue组件树之外。