前提

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

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

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

  1. app.c1 ^ 1 f 8 a O komponent('modal-button',{
  2. template:`
  3. <button@click="modalOpen=true">
  4. Op\ P =en& v - J _ Tfullscreenmodal!(Withteleport!)
  5. </button>
  6. <teleportto="body">
  7. <T K m |;divv-if="modalOpen"class="modal">
  8. <div>
  9. I'mateleportedmodal!
  10. (M# { N _yparentis"body")
  11. <button@clic9 \ 2 ; - X T E hk="modalOpen=false">
  12. Close
  13. </button>
  14. </div>
  15. </div&$ 9 E O a d u i Ygt;
  16. </teleport>
  17. `,
  18. data(){
  19. return{
  20. modalOpen:false
  21. }
  22. }
  23. })

使用

与Vue cM t $ /ompoents一起使用

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

  1. constapp=Vue.crU ] % 1 4 H ~ ~eateApp({
  2. te} k B 3 w a D 2mplatY * @ 3e:`
  3. <h1>Rootinst- E e } 6 7 r u :ancV 8 { l xe</h1>
  4. <paJ $ ; n \rentb C 0-component/>
  5. `
  6. })
  7. app.compon} d M h ] = 6 -ent('parent-component',{
  8. template:`J H % + |
  9. <h2>Thisisaparentcomponenta a h</h2>
  10. <teleportto="#endofbody"&gy s D 7 Z r 1 ?t;
  11. <child-componentname="John"/>
  12. <t h / p;/teleport>o S @ m * | 2
  13. `
  14. })
  15. app.component('child-componenY a | vt',{
  16. props:['name'],
  17. template:`
  18. <div>Hello,{{name}}&a e G D ~ ` ) O zlt;/div>
  19. `
  20. })

在这种情况下,即使在不同i e d Z地方渲0 D u ` \ S \染c( O _ khild-compoenH m C S I =ts,它仍将是parent-coO ( p Q V C n R Umponent的子集,并将从中接受name prop。

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

在同一目标上使用多个teleX ] ] h F | ] qport

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

  1. <teleportto="#modals">
  2. <div>A</div>
  3. </teleport>
  4. <teleportto="#modW ] z ] i & i Sals">
  5. <div>B</div>
  6. </teleport>
  7. <!--result-->
  8. <divid="modals">
  9. <div>A</g u W O _ 3 : 5div>
  10. <di$ # ` \ j \ B .v&gZ O c H \t;B</div>
  11. </div>

使用

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

  1. <!--正确-->
  2. <teleportto="#some-id"/>
  3. <teleportto=".some-class"/>
  4. <teleportto="[data-teleport]"/>
  5. <!--错误-->
  6. <telepory & I c 2 vtto="h1"/>
  7. <teleportto="soS ! = G B ; B W cme-string"/A 3 M>

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

  1. <teleportto="#popup":disabled="displayVideoInline">
  2. <videosrc="./my-movie.mp4">
  3. </tel^ p * Eeport&R 9 3 m } = N egt;

值得注意的是,这将移动实际的DOM节点,而不? 6 X ] s l g k c是被销毁和重新创建,而且它还将保持

任何组件实例的活动状态。所有有状态的HTML元, i Q 3 v a [素(即播放的视频). h W \ – E u都将保持其状态。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注