本文主要是介绍vue3学习(七)--- Teleport传送组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<Teleport>
是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
Teleport
是一种能够将我们的模板渲染至指定DOM
节点,不受父级style、v-show
等属性影响,但data、prop
数据依旧能够共用的技术。
主要解决的问题 因为Teleport
节点挂载在其他指定的DOM节点
下,完全不受父级style
样式影响。
to使用方法
通过to
属性 插入指定元素位置 to="body"
便可以将Teleport
内容传送到指定位置。
<Teleport to="body"><Loading></Loading>
</Teleport>
使用多个场景
<Teleport to=".modal1"><Loading></Loading>
</Teleport>
<Teleport to=".modal2"><Loading2></Loading2>
</Teleport>
- 可以自定义传送(移动)位置 支持
ele class id
等选择器,内部实现用的就是querySelector
来查找的。
disabled动态控制teleport
使用disabled
设置为 true
则 to
属性不生效, false
则生效。这样就可以动态控制是否要传送了。
<teleport :disabled="true" to='body'><A></A></teleport>
这篇关于vue3学习(七)--- Teleport传送组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!