vue-解决模态框modal在html渲染中层次太深，css布局代码难写的问题

在实际业务开发中，我们经常遇到这样的场景，某部分模板代码在逻辑上从属于当前组件，但从整个工程角度来看，它应该被渲染到当前dom外部，甚至body元素下。这样导致我们在写父元素的样式时，会不经意间改变本来写好的模态框样式，修改模态框样式时，又改变了祖先元素的样式，基于当前需求，vue内置组件给我们提供了Teleport，用它可以完美解决。

<Teleport to="body">
//......
</Teleport>

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

上面是官方给出的Teleport的解释。Teleport用to属性来接收一个“传送”的目标，这个值可以是任何css选择器字符串，也可以是具体的dom对象，如#app, .app，body等 。

注意：Teleport只改变dom渲染的层次结构，不改变具体的业务逻辑，所以传入的组件对象prop或者触发的自定义事件都是不影响的。

在某些情况下，我们需要禁用Teleport，比如在web端，需要让某些组件在最外浮层显示，在移动端又需要在dom深层次显示。这时候可以添加disabled来处理，如：

<Teleport :disabled="isMobile">
  ...
</Teleport>

今天的分享就到这里，感谢大家，我是猿-阿焱！