Vue中如何使用Teleport组件 |
您所在的位置:网站首页 › 实况手游3223教练推荐 › Vue中如何使用Teleport组件 |
Vue中如何使用Teleport组件
发布时间:2023-04-13 10:10:46
来源:亿速云
阅读:63
作者:iii
栏目:编程语言
这篇文章主要介绍“Vue中如何使用Teleport组件”,在日常操作中,相信很多人在Vue中如何使用Teleport组件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue中如何使用Teleport组件”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 01-组件套组件层次结构很深时 比如:现在有两个组件,父组件,子组件,在后代组件内,添加一个按钮,弹出一个模态框,让它在页面垂直水平居中显示 如下所示,父组件如下所示App.vue 我是父组件 import Child from "./Child.vue" .App { width: 400px; height: 400px; background:red; } 如下是Child组件,示例代码如下所示Child.vue,我们需要在孙(后代)组件,添加一个按钮,点击按钮,弹出一个弹框,水平垂直居中显示在页面中央
我是子组件 打开模态框 我是标题 我是弹框内容 关闭 import { ref } from "vue"; let isModel = ref(false); .child { width: 300px; height:300px; background:green; } /**灰色遮罩层 */ .mask-dialog { width: 100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.5) } .box { width: 200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:pink; text-align:center; }上面的子组件中有一个button按钮来触发打开当前组件的模态框,里面存在着控制弹框的显示和隐藏的逻辑,当嵌套的组件比较深,复杂时 如果父级元素存在定位,那在控制子元素的位置时,用css的transform或者position:absolute,参照对象的变更,会破坏布局结构,会出现一些css样式 控制的问题,解决起来会非常的痛苦 那这个Teleport组件就是为了解决这类问题,可以将指定的DOM结构片段,独立于到组件外面去,不受当前组件布局结构的影响 经过Teleport的修改后
我是子组件 打开模态框 我是标题1 我是弹框内容 关闭 import { ref } from "vue"; let isModel = ref(false); .child { width: 300px; height:300px; background:green; } /**灰色遮罩层 */ .mask-dialog { width: 100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.5) } .box { width: 200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:pink; text-align:center; }接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串,或id,也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue把以下模板片段传送到 body 标签下 html结构代码 html结构代码 html结构代码 html结构代码 02-Teleport组件它是Vue官方提供的一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去 也就是一种能够将我们的组件html结构移动到指定位置的技术 里面是Html结构模板内容 注意 挂载时,传送的 to 目标必须已经存在于DOM中。理想情况下,这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的,你需要确保在挂载 之前先挂载该元素 这个teleport将指定的模板html,放置到页面当中指定的位置处,它是有条件的,不是可以任意传送的 在安装组件之前,目标元素必须存在,即,目标不能由组件本身呈现,理想情况下应该位于整个Vue组件树之外。 如下代码是不行的 我是头部的内容 底部内容 h2 { color: red; } 03-需要知道的teleport只是改变了渲染的 DOM 结构,它不会影响组件间的逻辑关系。也就是说,如果 包含了一个组件,那么该组件始终和这个使用了 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。 这也意味着来自父组件的注入也会按预期工作,子组件将在 Vue Devtools 中嵌套在父级组件下面,而不是放在实际内容移动到的地方 位置移动了,提现在结构模板上,但是数据逻辑依旧存在关联的 04-如何禁用 Teleport在某些场景下可能需要视情况禁用 。举例来说,我们想要在桌面端将一个组件当做浮层来渲染,但在移动端则当作行内组件。我们可以通过对 动态地传入一个 disabled prop 来处理这两种不同情况 ... 这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新 05-多个 Teleport 共享目标时一个可重用的模态框组件可能同时存在多个实例。对于此类场景,多个 组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上 比如下面这样的用例 A B 渲染的结果为 A B 到此,关于“Vue中如何使用Teleport组件”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章! 推荐阅读: Vue中如何使用component组件 Vue中如何使用header组件免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue teleport 上一篇新闻:vue组件的编写风格有哪些 下一篇新闻:Vue页面保活方法是什么 猜你喜欢 springcloud 配置 eureka 访问密码 java中的List如何使用 如何面对高并发?缓存?中台为什么会火? 网红框架SpringBoot2.x之花式运行项目 教你使用cookie法,查看最近看过的书 H5定位终极解决方案 10个顶级的CSS3代码生成器 Java入门 - 语言基础 - 05.基本数据类型 TreeMap和TreeSet即Java中利用二叉搜索树实现的Map和Set JDK的安装配置过程 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |