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)用来存放可能被多次使用的强名称程序集.当主程序需要加载程序集的时候,优先选择到全局程序集缓存中去找寻需要的程序集. 为什么需要全局程 ...
随机推荐
- Centos7 安装 MPICH
查看官网版本 https://www.mpich.org/downloads/ 最新的stable release是mpich 4.0.2,复制下载链接. 安装依赖 mpich需要系列依赖,如果不确定 ...
- v87.01 鸿蒙内核源码分析 (内核启动篇) | 从汇编到 main () | 百篇博客分析 OpenHarmony 源码
本篇关键词:内核重定位.MMU.SVC栈.热启动.内核映射表 内核汇编相关篇为: v74.01 鸿蒙内核源码分析(编码方式) | 机器指令是如何编码的 v75.03 鸿蒙内核源码分析(汇编基础) | ...
- springboot如何使用自定义配置文件
从前边<springboot竟然有5种默认的加载路径,你未必都知道>我们知道,springboot会默认加载application.properties/application.yml ...
- 数位 dp 总结
数位 dp 总结 特征 问你一个区间 \([L,R]\) 中符合要求的数的个数 一个简单的 trick :把答案拆成前缀和 \(Ans(R)-Ans(L-1)\) 如何求 \(Ans()\) ,就要用 ...
- c++ FHQ Treap
前面我们对平衡树有了个大概的了解 关于 Treap Treap=Binary Search Tree + Heap 二叉搜索树 + 二叉堆(一般是小根堆) Treap 每一个节点有两个值 一个值是平衡 ...
- Camunda定时器事件示例Demo(Timer Events)
Camunda定时器事件(Timer Events)是由定义的计时器触发的事件.它们可以用作启动事件.中间事件或边界事件.边界事件可以中断,也可以不中断. Camunda定时器事件包括:Timer ...
- 开源流程引擎camunda如何扩展
市场上基于Java语言的开源工作流引擎有:osworkflow.jbpm.activiti.flowable.camunda等,其中osworkflow.jbpm流程引擎已经过时,目前主流的开源 ...
- 引入gitlab仓库代码到npm包的教程
背景介绍 随着人类地发展,社会地进步,计算机技术地更新迭代,每一片码海里都有它宝贵的财富,每一座码山里都有着各自的秘密.怎么守住财富,隐藏一些秘密,成了一些开发人员所关心的事情. 需求分析 简单地说, ...
- iNeuOS工业互联网操作系统,视图建模(WEB组态)增加2154个行业矢量图元、大屏背景及相关图元
1. 概述 现在三维数字孪生(3D)比较流行,各行业各领域的项目也都在上数字孪生项目或是项目中包括数字孪生模块,能做的厂家也很多.从全厂区的应用视觉的冲击力还是比较震撼,但是数字孪生不太可能包括 ...
- 【python基础】第01回 计算机基础1
本章内容概要 1.文件路径2.typora主要功能介绍3.typora语法学习(markdown)4.计算机的本质5.计算机五大组成部分6.网络博文编写教程 本章内容详解 1.文件路径 --路径:可以 ...