vue3学习(七)--- Teleport传送组件

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

Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术。

主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响。

to使用方法

通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置。

html 复制代码
<Teleport to="body">
    <Loading></Loading>
</Teleport>

使用多个场景

html 复制代码
<Teleport to=".modal1">
     <Loading></Loading>
</Teleport>
<Teleport to=".modal2">
     <Loading2></Loading2>
</Teleport>
  1. 可以自定义传送(移动)位置 支持 ele class id等选择器,内部实现用的就是querySelector来查找的。

disabled动态控制teleport

使用disabled 设置为 trueto属性不生效, false 则生效。这样就可以动态控制是否要传送了

html 复制代码
    <teleport :disabled="true" to='body'>
      <A></A>
    </teleport>
相关推荐
小一亿14 分钟前
【0基础PS】Photoshop (PS) 理论知识
学习·平面·adobe·信息可视化·photoshop
初遇你时动了情32 分钟前
JS中defineProperty/Proxy 数据劫持 vue3/vue2双向绑定实现原理,react 实现原理
javascript·vue.js·react.js
阿华的代码王国1 小时前
【Android】RecyclerView实现新闻列表布局(1)适配器使用相关问题
android·xml·java·前端·后端
慕y2741 小时前
Java学习第九十一部分——OkHttp
java·开发语言·学习
汪子熙1 小时前
Angular 最新的 Signals 特性详解
前端·javascript
Spider_Man1 小时前
前端路由双雄传:Hash vs. History
前端·javascript·html
南方kenny1 小时前
CSS Grid 布局:从入门到精通,打造完美二维布局
前端·javascript·css
小泡芙丫1 小时前
从买房到代码:发布订阅模式的"房产中介"之旅
前端·javascript
企鹅吧1 小时前
前端导出 pdf 与 跑马灯效果 最佳实践
前端·javascript·vue.js
南方kenny1 小时前
移动端适配的利器:lib-flexible 原理与实战
前端·javascript·react.js