vue3的新特性-Teleport-瞬间移动

最新推荐文章于 2023-11-29 21:12:27 发布
最新推荐文章于 2023-11-29 21:12:27 发布
阅读量179 收藏 2
点赞数 1
分类专栏： vue中的特性和注意点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49203377/article/details/119731563
版权

背景：为什么需要Teleport这个新的特性呢？

我们用组件表示一切界面中发生的逻辑，不过有些特例（比如在某个组件的渲染中，在某种条件下需要显示一个全局的对话框，如dialog组件或者modal组件，弹出一个服务层，让用户去完成一些确定或者取消的操作）从组件的设计中怎么去完成呢比如下面的写法 会造成什么样的问题呢？
在这里插入图片描述
这样写的话 最终dialog渲染产生的html会存在在上面，因为组件一般是父子结构
，这时dialog组件就会嵌套的特别深，这样会遇到哪些问题呢
在这里插入图片描述
我们即希望组件中dialog像一个普通的组件一样，又希望dialog的内容显示在另外一个DOM节点，这样就在结构上不属于其他元素的一个子组件了，这样就不会互相干扰了，这时候就需要Teleport了，Teleport就像一个传送门，Teleport包裹的组件在表现层和其他组件没有任何差异，但是渲染的东西会像传送门一样 在另外一个地方
举例：
在这里插入图片描述
在这里插入图片描述
会嵌套在其他的结构当中
现在使用
这时候我们使用teleport来解决这个问题

在这里插入图片描述
这个时候modal节点就是作为一个根元素了，就会渲染到这个modal节点中
在这里插入图片描述
这就是Teleport的用处把应该在app内部渲染的组件传送到了另外一个Dom节点上去

weixin_49203377
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3快速入门-Teleport(瞬移组件)
温情
06-17 2297
是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。 使用 就可以方便的解决组件间 css 层级问题我们将模态内容包装在 teleport 组件中，还需要指定一个 属性，为该属性分配一个查询选择器，以标识目标元素。 子组件-teleport to属性为bodyto属性为#d1:::......
vue3快速入门-Teleport传送(瞬移组件)
南北极之间
07-07 1138
Vue 的组件架构使我们能够将用户界面构建为能够精美地组织业务逻辑和表示层的组件。Teleporting是Vue 3发布带来的一项新功能，它的灵感来自React Portals。相同的门户是 React 中的一个常见功能，在 Vue2 的 portal-vue 库下可用，现在 Vue 团队在名为 Portal-Vue 的第三方插件的帮助下添加了。Vue 3 带来了许多有趣的新功能和更改，旨在使框架的开发更加容易和可维护。在本文中，我们将介绍 Vue 3 的新功能 Teleport。在 Vue 3 的早期阶段
Vue3 teleport 瞬间移动
林中明月间丶
08-24 286
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门” 场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多 原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难 另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值 这就
Vue3 Teleport（瞬移）
且听风吟的博客
05-12 400
Teleport 是一种能够将组件的 html 结构移动到指定位置的技术。
web前端之vue3+TypeScript中的teleport组件、瞬移、使用teleport组件包裹的内容可以设置其挂载到body标签上
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
01-11 572
web前端之vue3+TypeScript中的teleport组件、瞬移、使用teleport组件包裹的内容可以设置其挂载到body标签上
vue3+element-plus+admin
最新发布
04-12
Vue3 是 Vue.js 的最新版本，它引入了大量新特性和优化，提升了开发效率和性能。Element-Plus 是 Element UI 的升级版，为 Vue3 提供了一套丰富的组件库，涵盖了表格、按钮、对话框等多种UI元素。 1. **Vue3**: Vue...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue3实现v-model原理详解
10-16
主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
`vue-property-decorator`是一个库，它是Vue.js和TypeScript的结合，提供了装饰器来帮助我们在TypeScript中更好地声明和管理组件的属性。它使得我们可以利用TypeScript的强类型系统，提高代码的可维护性和可读性。...
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
vue3 Teleport瞬间移动函数的使用
pz1021的博客
03-03 620
vue3 Teleport瞬间移动函数的使用 Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件", 他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的 以一个例子来看:编写一个弹窗组件 <template> <teleport to="#modal"> <div id="center" v-if="isOpen"> <h2><slot>this is a modal</slot
Vue3.0来啦
qq_42880033的博客
11-13 99
Vue3.0—— 两年开发 Vue3.0终于在九月发布啦，但是目前官方文档还未发布中文文档 一.Vue3的新特性 性能提升:打包大小减少41% 初次渲染加快55%,更新快133% 内存使用减少54% Composition API: ref和reactive ///import { ref, computed, reactive, toRefs } from "vue"; computed和watch 新的生命周期函数 自定义函数-Hooks函数 其他新特性: Teleport-瞬移组件的位置 S
Vue3中teleport 组件是干什么用的
study_way的博客
11-29 1931
组件是 Vue 3 中引入的一个新组件，它的作用是将组件的内容渲染到 DOM 中的任何位置。Portal 允许在组件的模板中将内容渲染到 DOM 树的其他位置，而不受组件嵌套的限制。可以轻松实现在组件内部定义的内容在 DOM 树的其他位置动态渲染，而不受组件嵌套的限制。元素下，而不是在组件自身的位置。实例会监听到内容的变化，一旦内容发生变化，它就会将内容移动到目标位置。组件内部的内容将被移动到目标位置，而不是在组件自身的位置进行渲染。会将其内部的内容移动到目标位置，而不是在组件自身的位置进行渲染。
Vue3的Teleport是什么？
2301_77795034的博客
06-16 1274
在这个例子中，我们创建了一个名为“父组件”的Vue组件。在这个例子中，我们创建了一个名为“App”的Vue组件，并在其中使用了一个名为“children”的数据属性来存储所有被传送的子组件。你看，在Vue3中，你可以使用Teleport来将一个组件从一个位置“传送”到另一个位置，比如说，你有一个包含多个子组件的父组件，你想要将其中一个子组件传送到另一个位置，那么就可以使用Teleport来实现啦！在这个例子中，我们将会创建一个包含多个子组件的父组件，并通过动态组件来将其中一个子组件传送到另一个位置。
Vue 3 传送组件 —— Teleport
想搞全栈的前端
09-08 701
使用场景 在使用vue的时候我们经常会有这样的需求：希望某个组件内部的dom可以放到全局，而其内部的状态数据之类的又可以在改组件内部控制。 比如：我们在某个组件内部写一个弹窗，我们将它放在了我们的模板template里面，但是由于希望弹窗位于页面的最上方，这时候我们将其挂载在body上面是最好控制的，我们能够很好的通过zIndex来控制弹窗的位置，但是该弹窗嵌套在templat里面的时候就不那么容易操作了。 Props：** to - string 。 需要 prop，必须是有效的查询选择器或 HTM
Vue3 新特性初体验
Axton-Tang的博客
10-19 1217
Vue3 新特性 1、初始化开发环境 // 安装 / 更新 vue-cli （保证版本在4.5.0以上） npm install -g @vue/cli // 创建 vue create vue3-basic // 然后选择 Manually select features （因为我们需要使用TS），进入界面后选择TS（按空格选择） // 然后选择Vue3， 后面都保持默认和选择 No 2、ref 的使用 在 vue3 的 script 中不再使用 data 和 methods ，而是使用 set
vue3 setup watch computed teleport Suspense useRoute useRouter
xiao_yuanyuan_20的博客
05-25 924
一，setup(){} 1，定义变量 以及使用 setup(){ let age = 20; return{ age, } } 2,点击事件的方法。vue2 写入到methods中，在setup(){}中的写法 <button @click="modify">按钮</button> setup(){ let age = ref(20); //使用ref点击事件的时候是响应式的 const modify = ()=>{
vue传送简介vue3中的新功能
weixin_26717681的博客
08-25 528
One of the new features of Vue3 that has been talked about for a while is the idea of Portals — or ways to move template HTML to different parts of the DOM. Portals, which are a common feature in Reac...
Vue3内置组件Teleport用法详解
hezf_hero的博客
10-20 2254
Vue 3.0 新增了一个内置组件teleport，主要是为了解决以下场景： 有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置 场景举例：一个Button，点击后呼出模态对话框 这个模态对话框的业务逻辑位置肯定是属于这个Button，但是按照DOM结构来看，模态对话框的实际位置应该在整个应用的中间 这样就有了一个问题：组件的逻辑位置和DOM位置不在一起 按照以前Vue2的做法，一般是使用position: fixed;等CSS
vue3 使用vue-seamless-scroll
09-07
Vue和Vue3都可以使用`vue-seamless-scroll`无缝滚动组件。下面是使用`vue-seamless-scroll`的步骤。 在Vue中，使用`vue-seamless-scroll`的步骤如下： 1. 引入组件：在需要使用无缝滚动的组件中，通过`import`语句...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值