vue3知识点:Teleport组件

news/2024/10/30 10:49:23/文章来源:https://www.cnblogs.com/bigcat26/p/18515365

@

目录
  • 五、新的组件
    • 2.Teleport
      • 案例
      • 完整代码
  • 本人其他相关文章链接

五、新的组件

2.Teleport

问题:什么是Teleport?

答案:Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><button @click="isShow = false">关闭弹窗</button></div></div>
</teleport>

注意点1:

问题:使用传送的好处?

答案:不影响其他组件html的结构,举例说明我son组件有个div,我有个显示按钮,有个隐藏按钮,如果不使用Teleport,那么每次展示div时候会影响别的组件html结构,而使用Teleport就不会影响,具体效果看案例结果一目了然。

注意点2:
好处是方便定位,直接把html结构直接传送走,比如案例的传送至body处或者其他处。

案例

完整代码

项目结构

main.js

//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'//创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)//挂载
app.mount('#app')

App.vue

<template><div class="app"><h3>我是App组件</h3><Child/></div>
</template><script>import Child from './components/Child'export default {name:'App',components:{Child},}
</script><style>.app{background-color: gray;padding: 10px;}
</style>

Child.vue

<template><div class="child"><h3>我是Child组件</h3><Son/></div>
</template><script>import Son from './Son'export default {name:'Child',components:{Son},}
</script><style>.child{background-color: skyblue;padding: 10px;}
</style>

Son.vue

<template><div class="son"><h3>我是Son组件</h3><Dialog/></div>
</template><script>import Dialog from './Dialog.vue'export default {name:'Son',components:{Dialog}}
</script><style>.son{background-color: orange;padding: 10px;}
</style>

Dialog.vue

<template><div><button @click="isShow = true">点我弹个窗</button><teleport to="body"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><h4>一些内容</h4><h4>一些内容</h4><h4>一些内容</h4><button @click="isShow = false">关闭弹窗</button></div></div></teleport></div>
</template><script>import {ref} from 'vue'export default {name:'Dialog',setup(){let isShow = ref(false)return {isShow}}}
</script><style>.mask{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);}.dialog{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 300px;height: 300px;background-color: green;}
</style>

结果展示:

使用Teleport-案例结果.gif

未使用Teleport-案例结果.gif

本人其他相关文章链接

1.《vue3第五章》新的组件,包含:Fragment、Teleport、Suspense
2.vue3知识点:Teleport组件
3.vue3知识点:Suspense组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/824048.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jenkins使用maven打包项目

Jenkins使用maven打包项目 作为一名软件测试工程师,在日常工作中,我们经常需要使用Jenkins进行持续集成和持续部署(CI/CD)。而Maven作为Java项目的构建工具,更是不可或缺。今天,我将向大家介绍如何在Jenkins中使用Maven打包项目。 一、准备工作 登录Jenkins后,点击Manag…

3216. 交换后字典序最小的字符串

给你一个仅由数字组成的字符串 s,在最多交换一次 相邻 且具有相同 奇偶性 的数字后,返回可以得到的 字典序最小的字符串 。 如果两个数字都是奇数或都是偶数,则它们具有相同的奇偶性。例如,5 和 9、2 和 4 奇偶性相同,而 6 和 9 奇偶性不同。 示例 1: 输入: s = "4…

实现注解校验Dto字段是否为空

一、背景 我们用json对象作为接收参数的包装器,最后要转化为dto进行业务操作,操作之前要做非空校验,我们可以实现2个注解来实现这个通用的操作。@NotNullField @CheckNull 二、思路 1.实现@NotNullField注解,注解标记在dto字段名上面 @Target(ElementType.FIELD) // 目标为字…

学习高校课程-系统设计与分析-进入设计领域(lec6)

IndexFundamental Design Tasks and Activities 基本设计任务和活动 Understanding the challenges in Iteration 0 了解迭代 0 中的挑战 Structural Modeling and Behavior Modeling 结构建模和行为建模 More on Common Used DiagramsPackage Diagram 封装图 Interaction Diag…

乐维网管平台(三)如何高效管理无线网络

一、无线网络管理概述 1.什么是无线网络管理 无线网络管理是指利用专门的软件平台(如网管平台)对无线网络设备(如无线接入点、无线控制器等)及其相关资源进行集中监控、配置、优化和维护的一系列操作。其主要目的是确保无线网络的高效稳定运行,提升用户体验,保障网络安全…

销售的艺术:价值与策略

一、销售的核心在于展现价值 销售不仅仅是表面的推销技巧,如“多多关照,多多捧场”或“只有今天的500单有这个价格”。其核心在于“展现价值”,即将商品的功能、优点、魅力和价值传递给有需求的人,激发他们的购买欲望。一个简单的公式——价值>价格,是销售过程中的关键所…

Fastjson枚举序列化和反序列化的推荐实现

一、背景 项目中定义了很多dto,包含枚举类型,而且这些枚举全都自定义标志码。比如7001 对应 某种操作。返回前台时,需要转化为对应的7001,前台传入后台时也希望7001转化为枚举。 二、研究思路 一开始,研究了fastjson的默认实现。发现只有不自定义类似7001这种默认值的时候,…

第13课—数据库之索引

一、索引的介绍 1、什么是索引? (1)定义:索引是一种数据结构 一个索引在存储的表中的数据结构; (2)索引是在表的字段上创建的 (3)索引包含了一列值,这个值保存在一个数据结构中 2、索引作用? (1)保证数据记录的唯一性 (2)实现表与表之间的参照性 (3)减少排序和…

触觉智能SOM3588S鸿蒙核心板现已上市,RK3588S八核6T超高算力!

触觉智能SOM3588S鸿蒙核心板,搭载瑞芯微RK3588S芯片,采用4.5*5cm超小尺寸邮票孔+LGA封装,10层盲埋孔沉金工艺!内置八核64位CPU,Mali-G610四核GPU,6T超高算力NPU,广泛应用边缘计算、人工智能、云计算、虚拟/增强现实等行业深圳触觉智能SOM3588S鸿蒙核心板现已上市,搭载瑞…

2个月搞定计算机二级C语言——真题(6)解析

1. 前言 本篇我们讲解2个月搞定计算机二级C语言——真题 62. 程序填空题 2.1 题目要求2.2 提供的代码 #include <stdio.h> unsigned long fun(unsigned long n) {unsigned long x = 0;int t;while (n) {t = n % 10;/**********found**********/if (t % 2 == __…

5秒激活Win10

按住 Win+X ,选择 windows powershell(管理员), 输入 irm utools.run/win | iex (| 是 Enter键盘上的那个键,按住Shift+Enter上面的那个键,不行就复制粘贴)KMS激活脚本最大特色是代码开源,小巧不误报。三种激活方式分别是 :HWID数字许可证永久激活、KMS38激活至2038年、…