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>
相关推荐
人机888号2 分钟前
instanceof 的小秘密
javascript
轻语呢喃2 分钟前
时间分片思想:多数据的前端处理方法
前端·javascript·面试
Spider_Man2 分钟前
假装渲染十万条,虚拟列表的障眼法你学会了吗?
前端·javascript·react.js
ZCollapsar.5 分钟前
数据结构 02(线性:顺序表)
c语言·数据结构·学习·算法
334554327 分钟前
vue实现表格轮播
javascript·vue.js·ecmascript
IT_陈寒13 分钟前
Vite 3.0 性能飞跃的5个关键优化点,让构建速度提升200%!
前端·人工智能·后端
赵民勇16 分钟前
npm使用的环境变量及其用法
前端·npm·node.js
GLAB-Mary1 小时前
华为HCIP数通学习与认证解析!
学习·华为·华为认证·hcip
i小杨1 小时前
Mac 开发环境与配置操作速查表
前端·chrome
yueyuebaobaoxinx1 小时前
神经网络为何能 “学习”?从神经元到深度学习模型的层级结构解析
深度学习·神经网络·学习