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

前提

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

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

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

app.c1 ^ 1 f 8 a O komponent('modal-button',{
template:`
<button@click="modalOpen=true">
Op\ P =en& v - J _ Tfullscreenmodal!(Withteleport!)
</button>

<teleportto="body">
<T K m |;divv-if="modalOpen"class="modal">
<div>
I'mateleportedmodal!
(M# { N _yparentis"body")
<button@clic9 \ 2 ; - X T E hk="modalOpen=false">
Close
</button>
</div>
</div&$ 9 E O a d u i Ygt;
</teleport>
`,
data(){
return{
modalOpen:false
}
}
})

使用

与Vue cM t $ /ompoents一起使用

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

constapp=Vue.crU ] % 1 4 H ~ ~eateApp({
te} k B 3 w a D 2mplatY * @ 3e:`
<h1>Rootinst- E e } 6 7 r u :ancV 8 { l xe</h1>
<paJ $ ; n \rentb C 0-component/>
`
})

app.compon} d M h ] = 6 -ent('parent-component',{
template:`J H % + |
<h2>Thisisaparentcomponenta a h</h2>
<teleportto="#endofbody"&gy s D 7 Z r 1 ?t;
<child-componentname="John"/>
<t h / p;/teleport>o S @ m * | 2
`
})

app.component('child-componenY a | vt',{
props:['name'],
template:`
<div>Hello,{{name}}&a e G D ~ ` ) O zlt;/div>
`
})

在这种情况下，即使在不同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>组件可以将其内容挂载到同一个目标元素。顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之后。

<teleportto="#modals">
<div>A</div>
</teleport>
<teleportto="#modW ] z ] i & i Sals">
<div>B</div>
</teleport>

<!--result-->
<divid="modals">
<div>A</g u W O _ 3 : 5div>
<di$ # ` \ j \ B .v&gZ O c H \t;B</div>
</div>

使用

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

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

<!--错误-->
<telepory & I c 2 vtto="h1"/>
<teleportto="soS ! = G B ; B W cme-string"/A 3 M>

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

<teleportto="#popup":disabled="displayVideoInline">
<videosrc="./my-movie.mp4">
</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都将保持其状态。

2512141116@qq.com

链接