vue3的Teleport和插件的认识与 了解

最新推荐文章于 2024-05-07 22:03:40 发布
最新推荐文章于 2024-05-07 22:03:40 发布
阅读量439 收藏
点赞数
分类专栏： Vue日常总结 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/124271358
版权

vue3的Teleport和插件的认识与 了解

一、认识Teleport

在组件化开发中，我们封装一个组件A，在另外一个组件B中使用

  • 那么组件A中template的元素，会被挂载到组件B中template的某个位置
  • 最终我们的应用程序会形成一颗DOM树结构

但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置

  • 比如移动到body元素上，或者我们有其他的div#app之外的元素上
  • 这个时候我们就可以通过teleport来完成

Teleport是什么呢？

  • 它是一个Vue提供的内置组件，类似于react的Portals
  • teleport翻译过来是心灵传输、远距离运输的意思
  • 它有两个属性
  • to：指定将其中的内容移动到的目标元素，可以使用选择器
  • disabled：是否禁用 teleport 的功能

我们来看下面代码的效果：

最低0.47元/天 解锁文章
丑小鸭变黑天鹅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
web前端之vue3+TypeScript中的teleport组件、瞬移、使用teleport组件包裹的内容可以设置其挂载到body标签上
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
01-11 577
web前端之vue3+TypeScript中的teleport组件、瞬移、使用teleport组件包裹的内容可以设置其挂载到body标签上
Vue3中 内置组件 Teleport 详解
明天也要努力的博客
08-28 2万+
很简单，假如有非常多的弹窗，那么如何管理它们的 z-index 呢，也就是同时弹窗时的层级关系，如果每个弹窗都在各自的父组件中，那么我们是没法控制的，所有有必要把它们都拧出来，放在同一个父元素下面，这样就可以方便的设置层级关系了。但是如果把子组件放置到了 teleport 组件中，那么我们就可以指定该子组件渲染到父组件之外的其它 DOM 节点下，比如 body 或者其它的 DOM 等等。teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。...
teleport内置组件和plugins插件基本使用
最新发布
xiaoxiannvh的博客
05-07 438
【代码】teleport内置组件和plugins插件基本使用。
Vue3中＜Teleport/＞组件踩坑与异步组件运用
热门推荐
weixin_44647865的博客
12-09 3万+
重点：！这个组件要在你想要传送的DOM加载完成之后才能使用，不然是传送不了的。 ## 官方释义： 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 ## 作用场景：就比如说你想展示一个放大缩小的图片到整个页面上，但是又受到了例如：relative，absolute等定位的影响，运用这个组件或许是一个不错的方法，毕竟是官方提供的。
Vue和React高级特性之传送
老电影故事的博客
10-14 236
举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 动态地传入一个 disabled prop 来处理这两种不同情况。一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。提供了一个更简单的方式来解决此类问题，让我们不需要再顾虑 DOM 结构的问题。是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
React Portal
学习笔记
01-11 419
类似于Vue的 teleport 组件要调整其 wrap 的内容到 HTML DOM 恰当的位置， <teleport to="body"> // something </teleport> Reat Portal 要实现的也是一样的目的，但是要调用 ReactDOM.createPortal() 方法，此方法需要两个参数，一个是组件，一个是HTML位置： import React from "react"; import ReactDOM from "react-dom"; im
vue3浏览器调试插件
04-27
总之，Vue3浏览器调试插件是Vue3开发者的得力助手，它通过直观的界面和丰富的功能，极大地提升了开发和调试效率，是每个Vue开发者必备的工具之一。熟练掌握Vue Devtools的使用，将使你在Vue3开发中如鱼得水。
vue 开发者工具devtools(谷歌浏览器插件)，包括vue2和vue3
01-08
这两个版本的插件需要分别安装，因为它们针对的是Vue框架的不同版本，Vue 2和Vue 3在设计和实现上有显著的区别。 对于Vue 2.x，Vue Devtools 提供了以下关键功能： 1. **组件树**：显示应用程序的组件层次结构，使...
海康威视有插件版本-vue3集成开发，可云台控制
02-02
针对开发者，海康威视提供了相应的软件和插件以便进行定制化集成开发。在这个特定的项目中，我们关注的是一个基于Vue3框架的有插件版本，特别是针对云台控制功能的实现。 首先，让我们深入理解“Vue3集成开发”。...
使用 vue3.x版本开发 chrome插件
12-31
使用vue开发chrome浏览器插件，可以方便前端人员开发插件页面，不管是popup页面，content页面等都可以使用vue开发模式很方便的开发需求 码云地址：https://gitee.com/guoqiankun/my-vue3-plugin github地址：...
Vue Telescope-crx插件
04-01
语言:English 发现Vue.js网站 Vue Telescope是一个实用程序，可发现网站上使用的Vue.js插件和技术堆栈。 它检测Vue版本，插件，框架，Nuxt模块，甚至使用的UI。
react-TeleportReact组件在同一个React树中
08-14
Teleport React组件在同一个React树中
Vue3核心源码解析第十五课 Teleport、KeepAlive和Tranition组件详解
fegus的博客
07-13 727
我们都知道，Vue.js 的核心思想之一是组件化，组件就是 DOM 的映射，我们通过嵌套的组件构成了一个组件应用程序的树。但是，有些时候组件模板的一部分在逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到应用程序之外的其他位置。一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下，我们希望对话框的逻辑存在于组件中，但是对话框的定位 CSS 是一个很大的问题，它非常容易受到外层父组件的 CSS 影响。假设我们有这样一个 dialog 组件，用按钮来管理一个 dialog： 然后我们去使
teleport使用说明
weixin_33884611的博客
02-26 1211
      teleport使用说明   浏览器下载网页:只能浏览主页和少数网页，其它不能浏览，容量几百kbteleport下载项目一能完全离线看网页，7328多文件 9个JPG文件，大小134Mteleport下载项目二部分网页采集内容和项目一基本一致，但大几兆部分网页需要项目二（复制站点）才能浏览，项目一看不到图片项目二比项目一耗时多，但要全面 视频教程 https...
Vue.js 3中的Teleport是什么？
alive_new的博客
03-29 344
在 Vue.js 3 中，Teleport（传送门）是一种特殊的组件，它允许你将内容渲染到 DOM 树中的其他位置，而不受组件层次结构的限制。它提供了一种在组件之外渲染内容的方式，使得内容可以跨越组件边界进行渲染。
Teleport——Vue3项目中的传入，传送门
诸葛韩信--一个前往前端不归路的浪子
06-18 545
为什么会有Teleport的出现？那是因为写组件有的时候真的很繁琐，而且一个项目有可能有很多tankuang
vue3学习笔记二：传送门Teleport的使用
weixin_43837268的博客
11-20 184
1、ModelButton.vue <template> <div> <button @click="modelOpen=true">弹出一个模态窗口</button> </div> <!-- 挂载在body上 --> <teleport to="body"> <div v-if="modelOpen" class="modal">
vue3 Teleport
05-07
Vue 3中的Teleport是一个新的组件，它允许您将组件的子元素渲染到应用程序中的任何位置，从而实现更好的灵活性和复用性。Teleport的工作方式类似于Vue 2中的<slot>元素，但有一些重要的不同之处。 下面是一个部分代码演示如何使用Teleport组件[^1]： ```html <template> <div> <button @click="showModal = true">Show Modal</button> <teleport to="body"> <div v-if="showModal"> <h2>Modal</h2> <p>This is a modal dialog.</p> <button @click="showModal = false">Close Modal</button> </div> </teleport> </div> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'App', components: { Teleport, }, setup() { const showModal = ref(false); return { showModal, }; }, }); </script> ``` 在上面的代码中，我们可以看到Teleport组件被包含在一个button里，当用户点击这个button时，模态框会出现。在Teleport标签中，我们指定了to属性，它允许我们将Teleport组件的子元素传输到任何DOM节点中，例如我们在这里将模态框传输到body节点中。 Teleport的使用方法非常简单，只需像使用其他Vue组件一样将其导入并使用它即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值