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

前提

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

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

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

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>           Im a teleported modal!            (My parent is "body")           <button @click="modalOpen = false">             Close           </button>         </div>       </div>     </teleport>   `,   data() {      return {         modalOpen: false     }   } }) 

使用

与Vue compoents一起使用

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

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-compoents，得注它仍将是新特性parent-component的子集，并将从中接受name prop。云南idc服务商得注

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

在同一目标上使用多个teleport

一个常见的用例场景是一个可重用的<Modal>组件，他可能同时有多个实例处于活动状态。对于这种情况，多个<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> 

使用

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

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

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

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

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

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

云服务器

很赞哦!（79）