Vue3 新特性内置组件＜Teleport＞

任意传送门——Teleport

Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新；
Vue3 还新增了一个内置组件：Teleport。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。

为什么我们需要 Teleport

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

场景

像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多

原因

原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值

这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

teleport (API)

to属性 --> string类型。需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动内容的目标元素

<!-- 正确 -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- 错误 -->
<teleport to="h1" />
<teleport to="some-string" />

disabled属性 --> boolean类型。此可选属性可用于禁用的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了的位置渲染。

<teleport to="#popup" :disabled="displayVideoInline"><video src="./my-movie.mp4">
</teleport>

注意：

这将移动实际的 DOM 节点，而不是被销毁和重新创建，并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素 (即播放的视频) 都将保持其状态。

Teleport 组件使用

一个常见的场景是创建一个包含全屏模式的组件。在大多数情况下，你希望模态框的逻辑存在于组件中，但是模态框的快速定位就很难通过 CSS 来解决，或者需要更改组件组合。

考虑下面的 HTML 结构:

<body><div style="position: relative;"><h3>Tooltips with Vue 3 Teleport</h3><div><modal-button></modal-button></div></div>
</body>

让我们来看看 modal-button 组件：

该组件将有一个 button 元素来触发模态框的打开，以及一个带有 class .modal 的 div 元素，它将包含模态框的内容和一个用于自关闭的按钮。

const app = Vue.createApp({});app.component('modal-button', {template: `<button @click="modalOpen = true">Open full screen modal!</button><div v-if="modalOpen" class="modal"><div>I'm a modal! <button @click="modalOpen = false">Close</button></div></div>`,data() {return { modalOpen: false}}
})

当在初始的 HTML 结构中使用这个组件时，我们可以看到一个问题——模态框是在深度嵌套的 div 中渲染的，而模态框的 position:absolute 以父级相对定位的 div 作为引用。

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。

让我们修改 modal-button 以使用 <teleport>，并告诉 Vue “Teleport 这个 HTML 到该‘body’标签”。

app.component('modal-button', {template: `<button @click="modalOpen = true">Open full screen modal! (With teleport!)</button><teleport to="body"><div v-if="modalOpen" class="modal"><div>I'm a teleported modal! (My parent is "body")<button @click="modalOpen = false">Close</button></div></div></teleport>`,data() {return { modalOpen: false}}
})

因此，一旦我们单击按钮打开模态框，Vue 将正确地将模态框内容渲染为 body 标签的子级。

与 Vue components 一起使用

如果 <teleport> 包含 Vue 组件，则它仍将是父组件的逻辑子组件：

const app = Vue.createApp({template: `<h1>Root instance</h1><parent-component />`
})app.component('parent-component', {template: `<h2>This is a parent component</h2><teleport to="#endofbody"><child-component name="John" /></teleport>`
})app.component('child-component', {props: ['name'],template: `<div>Hello, {{ name }}</div>`
})

在这种情况下，即使在不同的地方渲染 child-component，它仍将是 parent-component 的子级，并将从中接收 name prop。

这也意味着来自父组件的注入会正常工作，在 Vue Devtools 中你会看到子组件嵌套在父组件之下，而不是出现在他会被实际移动到的位置。

在同一目标上使用多个 teleport

一个常见的用例场景是一个可重用的组件，它可能同时有多个实例处于活动状态。对于这种情况，多个组件可以将其内容挂载到同一个目标元素。顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之后。

<teleport to="#modals"><div>A</div>
</teleport>
<teleport to="#modals"><div>B</div>
</teleport><!-- result-->
<div id="modals"><div>A</div><div>B</div>
</div>

Vue3 新特性内置组件＜Teleport＞相关推荐

Vue3中内置组件 Teleport 详解
1. 基本概念 1.1 简单理解不管是 Vue2 还是 Vue3 中都有内置组件的存在,如 component 内置组件.transition 内置组件等等.内置组件就是官方给我们封装的全局组件,我 ...
Vue3内置组件Teleport
一.Teleport的介绍 Teleport是Vue 3.0 新增的一个内置组件,主要是为了解决一些特殊场景下模态对话框组件.组件的渲染. Teleport 是一种能够将我们的模板移动到 DOM 中 ...
Vue3内置组件teleport详解
teleport的作用该组件可以将指定内容渲染到特定容器中,而不受 DOM 层级的限制应用场景当蒙层内容在一个组件中时,蒙层内容是无法遮挡住全部内容的,因此,需要使用teleport将蒙层内容渲 ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
Vue基础+Vue3新特性
目录模板语法文本原始HTML 属性Attribute 使用 JavaScript 表达式条件渲染 v-if v-else v-show v-if vs v-show 的区别列表渲染事件处理 ...
VUE内置组件 vue使用插槽分发内容组件缓存实现动画的过渡效果
动态组件除了允许用户自定义组件之外,Vue还内置了一些组件,以帮助用户高效地开发一些功能.本章将带领大家一起来了解这些内置组件. 某些时候需要动态切换页面部分区域的视图,这个时候内置组件compon ...
卷死了！再不学vue3就没有人要你了！速来围观vue3新特性
一文全面了解vue3新特性一.
form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...

Vue3 新特性内置组件＜Teleport＞

任意传送门——Teleport

teleport (API)

Teleport 组件使用

与 Vue components 一起使用

在同一目标上使用多个 teleport

Vue3 新特性内置组件＜Teleport＞相关推荐

最新文章

热门文章

Vue3 新特性 内置组件 ＜Teleport＞

任意传送门——Teleport

teleport (API)

Teleport 组件使用

与 Vue components 一起使用

在同一目标上使用多个 teleport

Vue3 新特性 内置组件 ＜Teleport＞相关推荐

最新文章

热门文章

Vue3 新特性内置组件＜Teleport＞

Vue3 新特性内置组件＜Teleport＞相关推荐