极速上手 VUE 3 teleport传送门组件及使用语法

2024-11-02 18:23:03

一、teleport 介绍

teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素。通俗易懂地讲，就是 teleport 中的内容允许我们控制在任意的DOM中，使用简单。

使用语法：

<teleport to="body">
    <div>
   需要创建的内容
  </div>
</teleport>

to 属性是指定 teleport 中的内容加入的DOM元素。可以是标签名，也可以是 id 或类名。

//标签名  。上述实例就是加入body元素内，使用的是标签名。
<teleport to="body"></teleport>

//类名。如：to=".className"
<teleport to=".className"></teleport>

//id名
<teleport to="#idName"></teleport>

1.1、多个 teleport 使用

多个 teleport 传送门组件可以将内容都挂载到一个目标上，多个 teleport 组件内容就是兄弟节点，先挂载的在前面，后挂载的在后面。

使用如下：

<teleport to="body">
    <div class="first">
   第一个挂载元素
  </div>
</teleport>
<teleport to="body">
    <div class="second">
   第二个挂载元素
  </div>
</teleport>

运行结果如图：

上边的实例等价于：

<teleport to="body">
 <div class="first">
  第一个挂载元素
 </div>
 <div class="second">
  第二个挂载元素
 </div>
</teleport>

二、为什么使用 teleport

使用 vue 开发时，都是多个组件之间不断地嵌套，处理元素的样式或者层级的时候就会变得困难。如我们需要添加一个 modal 模态框或 toast 提示框，如果我们把这样的框可以从 vue 组件中剥离出来，我们样式和层级设置起来会更加简便。

有些同学会想，这直接放到 index.html 中不就好了吗？另外 modal 、toast 元素需要使用 vue 组件的状态值，通过状态控制 modal、toast 的隐藏显示。如果直接放入 index.html 则状态控制就复杂了。

所以 teleport 传送门组件就派上用场了。有点像“哆啦A梦”的任意门，可以把元素传送到任意的元素内。同时还可以使用 vue 组件内的状态值控制它。

三、teleport 应用

使用 vite + vue 3创建的项目，具体如何创建项目请查看《什么，你还使用 webpack？别人都在用 vite 搭建项目了》文章。

vue 3的项目创建完成之后，找到index.htm文件，添加：

<div id="newModal"></div>

组件文件内，添加 teleport 组件：

<button @click="showModal" class="btn">打开 modal </button>
<!-- to 属性就是目标位置 -->
<teleport to="#newModal">
 <div v-if="visible">
  <div >我是一个 Modal 框</div>
  </div>
</teleport>

运行结果，我们发现使用的teleport组件，通过 to 属性，将内容传送到<div></div>内，该元素与<div></div>同级。此时 teleport 中的元素隐藏显示完全由vue组件内的状态值决定。

四、初学者容易遇到的坑

有些同学在自己的项目内，直接引入了 teleport 传送门组件，运行以后发现该组件原样输出了，并没有被解析，同时还会报错。

错误信息如下：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <teleport> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

然后就在网上各种查解决办法，最后发现压根找不到！

根本原因是你使用的还是vue2，不是vue3。有些同学会把脚手架vue-cli 3创建的项目，当作是 vue3 。vue-cli 2 和 vue-cli 3 创建项目与是否是 vue3 没有必然联系的。

到此这篇关于极速上手 VUE 3 teleport传送门组件的文章就介绍到这了,更多相关VUE 3 teleport传送门内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解Vue3 Teleport 的实践及原理

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport.这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置. 使用场景业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件.相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题. 话不多说,我们先写一个简单的 Modal 组件.  <
详解Vue3中Teleport的使用

在本文中,我们将介绍: Teleport 的目的 Teleport 的例子一些很有意思的代码交互 Teleport 的目的首先是什么时候以及使用这个 Teleport 功能. 在开发较大的 Vue 项目时应该以可重用的逻辑去组织代码.但是当处理某些类型的组件(如模式.通知或工具提示)时,模板 HTML 的逻辑可能不会和我们希望渲染元素处于相同的文件中. 实际上在大多数情况下,与 Vue 的 DOM 完全分开处理相比,处理这些元素要容易得多.因为嵌套组件的位置.z-index 和样式等这些东西
vue3 Teleport瞬间移动函数使用方法详解

vue3 Teleport瞬间移动函数的使用,供大家参考,具体内容如下 Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件" 他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的以一个例子来看:编写一个弹窗组件 <template> <teleport to="#modal"> <div id="center" v-if="isOpen">
Vue3内置组件Teleport使用方法详解

目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置场景举例:一个 Button ,点击后呼出模态对话框这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间这样就有了一个问题:组件的
极速上手 VUE 3 teleport传送门组件及使用语法

目录一.teleport 介绍 1.1.多个 teleport 使用二.为什么使用 teleport 三.teleport 应用四.初学者容易遇到的坑一.teleport 介绍 teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素.通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的DOM中,使用简单. 使用语法: <teleport to="body"> <div> 需要创建的内容 </div> &l
一步步教你用Vue.js创建一个组件(附代码示例)

目录前言到底什么是组件? 为什么你一定要使用组件在Vue中创建一个组件模板部分脚本部分选项API:旧的方式合成API:现在和未来风格部分总结前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最
vue基于Teleport实现Modal组件

1.认识Teleport 像我们如果写Modal组件.Message组件.Loading组件这种全局式组件,没有Teleport的话,将它们引入一个.vue文件中,则他们的HTML结构会被添加到组件模板中,这是不够完美的. 没有Teleport 有Teleport 下面就实战介绍一下如何用Teleport开发Modal组件 2.Teleport的基本用法 Teleport的写法十分简单,只需要用<Teleport></Teleport>将内容包裹,并用to指定将HTML挂到哪个父节
vue的toast弹窗组件实例详解

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需在 <template> 里面写 <toast :show="true" text="弹窗消息
vue中使用elementUI组件手动上传图片功能

Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim
详解Vue新增内置组件的使用

目录一.Teleport 1.1 Teleport 介绍 1.2 使用 Teleport 1.3 预览效果二.Suspense 2.1 介绍 Suspense 2.2 使用 Suspense 2.3 预览效果总结一.Teleport Teleport 官方文档 1.1 Teleport 介绍 1.Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建我们的 UI.我们可以将它们相互嵌套以构建构成应用程序 UI 的树. 2.但是,有时组件模板的一部分在逻辑上属于该组件,而从技术角度来看
Vue手写实现组件初渲染

目录前言生成虚拟节点将虚拟节点处理为真实节点总结前言在Vue进行文本编译之后,会得到代码字符串生成的render函数.本文会基于render函数介绍以下内容: 执行render函数生成虚拟节点通过vm._update方法,将虚拟节点渲染为真实DOM 在vm.$mount方法中,文本编译完成后,要进行组件的挂载,代码如下: Vue.prototype.$mount = function (el) { // text compile code .... mountComponent(v
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt
基于Vue如何封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se
Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引