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

相关文章

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言:为什么要自建知识博客一、技术选型:极简主义开发栈二、系统架构设计三、核心代码实现(分步解析

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.