在实际业务开发中,我们经常遇到这样的场景,某部分模板代码在逻辑上从属于当前组件,但从整个工程角度来看,它应该被渲染到当前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>
今天的分享就到这里,感谢大家,我是猿-阿焱!