Vue3系列11--Teleport传送组件
Teleport
是一种能够将我们的模板移动到 DOM
中 Vue app
之外的其他位置的技术,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;类似于 React 的 Portal。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响。
场景:像 modals
,toast
等这样的元素,很多情况下,我们将它完全的和我们的 Vue
应用的 DOM
完全剥离,管理起来反而会方便容易很多,原因在于如果我们嵌套在 Vue
的某个组件内部,那么处理嵌套组件的定位、z-index
和样式就会变得很困难,另外,像 modals
,toast
等这样的元素需要使用到 Vue
组件的状态(data
或者 props
)的值,这就是 Teleport
派上用场的地方。我们可以在组件的逻辑位置写模板代码,这意味着我们可以使用组件的 data
或 props
。然后在 Vue
应用的范围之外渲染它
使用方法:
通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置,例如下面将内容传输到body里面。
也可以自定义传送位置 支持 class id等 选择器;也可以使用多个。
<div id="app"></div>
<div class="modal"></div> <Teleport to=".modal">
测试
</Teleport>
<Teleport to="#app">
测试
</Teleport>
Vue3系列11--Teleport传送组件的更多相关文章
- vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...
- vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件
基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- 极速上手 VUE 3 —— teleport传送门组件
一.teleport 介绍 teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素.通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的DOM中,使用简单. 使用 ...
- Spring框架系列(11) - Spring AOP实现原理详解之Cglib代理实现
我们在前文中已经介绍了SpringAOP的切面实现和创建动态代理的过程,那么动态代理是如何工作的呢?本文主要介绍Cglib动态代理的案例和SpringAOP实现的原理.@pdai Spring框架系列 ...
- Java 集合系列11之 Hashtable详细介绍(源码解析)和使用示例
概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...
- Java 集合系列 11 hashmap 和 hashtable 的区别
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(11)-验证码实现和底层修改
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(11)-验证码实现和底层修改 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 ...
- saltstack自动化运维系列11基于etcd的saltstack的自动化扩容
saltstack自动化运维系列11基于etcd的saltstack的自动化扩容 自动化运维-基于etcd加saltstack的自动化扩容# tar -xf etcd-v2.2.1-linux-amd ...
- C#程序集系列11,全局程序集缓存
全局程序集缓存(GAC:Global Assembly Cache)用来存放可能被多次使用的强名称程序集.当主程序需要加载程序集的时候,优先选择到全局程序集缓存中去找寻需要的程序集. 为什么需要全局程 ...
随机推荐
- Linux内网渗透
Linux虽然没有域环境,但是当我们拿到一台Linux 系统权限,难道只进行一下提权,捕获一下敏感信息就结束了吗?显然不只是这样的.本片文章将从拿到一个Linux shell开始,介绍Linux内网渗 ...
- 给小白的 PostgreSQL 容器化部署教程(上)
作者:王志斌 编辑:钟华龙 本文来自社区小伙伴 王志斌 的投稿.从小白的角度,带你一步步实现将 RadonDB PostgreSQL 集群部署到 Kubernetes 上.文章分为上下两部分,第一部分 ...
- HMS Core分析服务6.5.0版本更新啦
卸载用户价值的合理评估对制定相应的用户召回策略具有重要意义. HMS Core分析服务新版本支持查看用户卸载前使用次数.崩溃次数等指标.通过这些数据,您可以更直观地判断已卸载人群粘性以及崩溃问题对用户 ...
- 盘点微信小程序跨页面传值的若干方式
直接给大家上干货 1.跳转页面传递参数 pageA.wxml <button type="primary" bindtap="jumpTo">点击跳 ...
- rabbitMq急速安装教程
背景 我们在工作中很多时候其实也用过mq.但是仅仅只是会用,所以老猫在此想完整地归纳一下mq相关的知识点,在此分享给大家.首先给大家带来的是mq的单机急速安装.操作系统时centos7.(本来想记录到 ...
- pytorch基础常识
- CentOS8设置国内镜像源(阿里云镜像)
CentOS8设置国内镜像源(阿里云) 1.备份原有配置 [root@localhost ~]# mkdir /etc/yum.repos.d.bak [root@localhost ~]# mv / ...
- tf.data(二) —— 并行化 tf.data.Dataset 生成器
在处理大规模数据时,数据无法全部载入内存,我们通常用两个选项 使用tfrecords 使用 tf.data.Dataset.from_generator() tfrecords的并行化使用前文已经有过 ...
- LVS简单搭建(一)
先说一个坑: 192.168.65.110为虚拟ip,在主节点设置(ifconfig eth0:8 192.168.65.110/24),其他子节点要与主节点保持一致(ifconfig lo:3 ...
- Linux安装MySQL,数据库工具连接Linux的MySQL
1.centOS中默认安装了MariaDB,需要先进行卸载 rpm -qa | grep -i mariadb rpm -e --nodeps 上面查出来的mariadb 2.下载MySQL仓库并安装 ...