vue3快速入门-Teleport传送(瞬移组件)

本文主要是介绍vue3快速入门-Teleport传送(瞬移组件),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

Vue 的组件架构使我们能够将用户界面构建为能够精美地组织业务逻辑和表示层的组件。Teleporting是Vue 3发布带来的一项新功能,它的灵感来自React Portals。相同的门户是 React 中的一个常见功能,在 Vue2 的 portal-vue 库下可用,现在 Vue 团队在名为 Portal-Vue 的第三方插件的帮助下添加了。

什么是传送?

Vue 3 带来了许多有趣的新功能和更改,旨在使框架的开发更加容易和可维护。在本文中,我们将介绍 Vue 3 的新功能 Teleport。在 Vue 3 的早期阶段,这个特性被称为 Portals,但 Vue 团队最终决定将其命名为 Teleport。顾名思义,传送是一种可以使元素从一个组件转到另一个组件的组件。在 Vue JS 术语中,它允许您在一个位置定义一个组件,并将其呈现在 DOM 树中的不同位置,甚至在 Vue 应用程序的范围之外。

如何使用它?

<teleport> 标记采用“to”属性,该属性指定要将元素传送到 DOM 中的位置。此目标必须位于组件树外部的某个位置,以避免与其他应用程序的 UI 组件发生任何类型的干扰。出于这个原因,Vue 团队建议把它放在公共目录的索引.html文件中的 body 标签下面。Vue 的组件架构使我们能够将用户界面构建为能够精美地组织业务逻辑和表示层的组件。当您使用模式或通知等组件时,您会注意到它们在 DOM 中的位置很重要。

若要在应用中使用传送组件,需要先向 html 中的 #app 元素添加同级元素。

<html><body><div id="app"></div><!-- built files will be auto injected --><div class="loader"></div><!-- loader component will be injected here --></body>
</html>

完成此操作后,请转到 .vue 文件并使用传送组件:

<template><teleport to=".loader" v-if="showLoader"><Loader /></teleport><!-- The logic of your component goes below -->
</template>

就是这样!现在,当满足 showLoader 条件时,加载程序将显示在指定的 html 元素中。

传送道具

to

 — 这是一个 prop,它指定一个目标元素,其中将呈现<teleport>中的每个内容。to prop 的值必须是标识现有 CSS 类 id 或 HTMLElement 的有效查询选择器:

<!-- ok -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" /><!-- Wrong -->
<teleport to="h1" />
<teleport to="some-string" />

disabled

 — 顾名思义,此 prop 是用于禁用传送功能的布尔值。设置为 true 时,<teleport>的内容将在指定它的位置呈现。因此,它不会被“传送”到任何外部目标或位置。使用我们前面的示例,如果我们想禁用模态的传送,我们会将禁用的 prop 添加到其中,如下所示:

<!-- src/components/HelloWorld.vue -->
<teleport to="#my-modal" :disabled="true"><button @click="showModal = true" >Open Modal</button><div v-if="showModal" id="myModal"><div class="modal-content"><span @click="showModal = false">×</span><h3>This is the title</h3><p>This is the content</p></div></div>
</teleport>

值得补充的是,您可以将内容直接传送到正文,而不仅仅是指定的CSS选择器。下面是一个示例:

<!-- src/components/HelloWorld.vue -->
<teleport to="#body"><button @click="showModal = true">Open Modal</button><div v-if="showModal" id="myModal"><div class="modal-content"><span @click="showModal = false">×</span><h3>This is the title</h3><p>This is the content</p></div></div>
</teleport>

传送的目的

首先要考虑的是此瞬移功能何时以及为何可以派上用场。
我期待尝试的另一个有趣的用例是模块化应用程序。像WordPress这样的平台,允许模块在UI中渲染成不同的钩子,并且可以通过传送来设想类似的概念。

值得补充的是,您可以将内容直接传送到正文,而不仅仅是指定的CSS选择器。下面是一个示例:

结论

首先要考虑的是此瞬移功能何时以及为何可以派上用场。我期待尝试的另一个有趣的用例是模块化应用程序。像WordPress这样的平台,允许模块在UI中渲染成不同的钩子,并且可以通过传送来设想类似的概念。

这篇关于vue3快速入门-Teleport传送(瞬移组件)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/315376

相关文章

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识:传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

Redis 配置文件使用建议redis.conf 从入门到实战

《Redis配置文件使用建议redis.conf从入门到实战》Redis配置方式包括配置文件、命令行参数、运行时CONFIG命令,支持动态修改参数及持久化,常用项涉及端口、绑定、内存策略等,版本8... 目录一、Redis.conf 是什么?二、命令行方式传参(适用于测试)三、运行时动态修改配置(不重启服务