Vue3值得注意的新特性之——teleport

开发 前端
Vue鼓励我们通过将UI和相关行为封装到组件中来构建UI。我们可以将它们嵌套在另一个内部,来构建一个组成应用程序UI树。

前提

Vue鼓励我们通过将UI和相关行为封装到组件中来构建UI。我们可以将它们嵌套在另一个内部,来构建一个组成应用程序UI树。

然而,有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到DOM中Vue app之外的其他位置。

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

  1. app.component('modal-button', { 
  2.   template: ` 
  3.     <button @click="modalOpen = true"
  4.         Open full screen modal! (With teleport!) 
  5.     </button> 
  6.  
  7.     <teleport to="body"
  8.       <div v-if="modalOpen" class="modal"
  9.         <div> 
  10.           I'm a teleported modal!  
  11.           (My parent is "body"
  12.           <button @click="modalOpen = false"
  13.             Close 
  14.           </button> 
  15.         </div> 
  16.       </div> 
  17.     </teleport> 
  18.   `, 
  19.   data() { 
  20.     return {  
  21.       modalOpen: false 
  22.     } 
  23.   } 
  24. }) 

使用

与Vue compoents一起使用

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

  1. const app = Vue.createApp({ 
  2.   template: ` 
  3.     <h1>Root instance</h1> 
  4.     <parent-component /> 
  5.   ` 
  6. }) 
  7.  
  8. app.component('parent-component', { 
  9.   template: ` 
  10.     <h2>This is a parent component</h2> 
  11.     <teleport to="#endofbody"
  12.       <child-component name="John" /> 
  13.     </teleport> 
  14.   ` 
  15. }) 
  16.  
  17. app.component('child-component', { 
  18.   props: ['name'], 
  19.   template: ` 
  20.     <div>Hello, {{ name }}</div> 
  21.   ` 
  22. }) 

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

这也意味着来自父组件的注入按预期工作,并且子组件将嵌套在Vue Devtools中的父组件之下,部署放在实际内容移动到的位置。

在同一目标上使用多个teleport

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

  1. <teleport to="#modals"
  2.   <div>A</div> 
  3. </teleport> 
  4. <teleport to="#modals"
  5.   <div>B</div> 
  6. </teleport> 
  7.  
  8. <!-- result--> 
  9. <div id="modals"
  10.   <div>A</div> 
  11.   <div>B</div> 
  12. </div> 

使用

to:String。需要prop,必须是有效的查询选择器或HTMLElement(如果在浏览器环境中使用)。指定将在其移动<teleport>内容的目标元素。

  1. <!-- 正确 --> 
  2. <teleport to="#some-id" /> 
  3. <teleport to=".some-class" /> 
  4. <teleport to="[data-teleport]" /> 
  5.  
  6. <!-- 错误 --> 
  7. <teleport to="h1" /> 
  8. <teleport to="some-string" /> 

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

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

值得注意的是,这将移动实际的DOM节点,而不是被销毁和重新创建,而且它还将保持

任何组件实例的活动状态。所有有状态的HTML元素(即播放的视频)都将保持其状态。

 

责任编辑:张燕妮 来源: 今日头条
相关推荐

2021-05-12 10:25:53

组件验证漏洞

2015-06-23 15:48:41

Swift 2.0iOS9

2020-12-01 08:34:31

Vue3组件实践

2023-11-29 09:05:59

Vue 3场景

2010-07-21 16:28:33

职场

2022-07-14 08:22:48

Computedvue3

2021-03-31 08:01:50

Vue3 Vue2 Vue3 Telepo

2013-09-16 13:18:28

遗留系统系统迁移

2024-10-24 09:18:45

2010-11-26 15:05:58

MySQL变量

2021-12-31 07:48:58

Vue3 插件Vue应用

2011-05-12 09:29:54

2017-02-21 13:20:02

SD-WAN软件定义网络广域网

2015-10-08 09:25:05

比特币存储开源

2010-03-31 15:52:24

Oracle子查询

2021-08-11 08:31:42

前端技术Vue3

2009-06-15 14:53:00

NetBeans 6.

2010-07-12 10:48:21

SQL Server数

2012-05-28 09:34:33

Linux Mint UbuntOS

2023-03-15 18:25:25

点赞
收藏

51CTO技术栈公众号