传入

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

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

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

考虑下面的 HTML 结构。

  1. <body>
  2.   <div style="position: relative;">
  3.     <h3>Tooltips with Vue 3 Teleport</h3>
  4.     <div>
  5.       <modal-button></modal-button>
  6.     </div>
  7.   </div>
  8. </body>

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

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

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

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

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

让我们修改 modal-button 以使用 <teleport>，并告诉 Vue 将这个 HTML 传入至该 body 标记。

  1. app.component('modal-button', {
  2.   template: `
  3.     <button @click="modalOpen = true">
  4.         Open full screen modal! (With teleport!)
  5.     </button>
  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 将正确地将模态内容渲染为 body 标签的子级。

与 Vue components 一起使用

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

  1. const app = Vue.createApp({
  2.   template: `
  3.     <h1>Root instance</h1>
  4.     <parent-component />
  5.   `
  6. })
  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. })
  17. app.component('child-component', {
  18.   props: ['name'],
  19.   template: `
  20.     <div>Hello, {{ name }}</div>
  21.   `
  22. })

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

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

在同一目标上使用多个传送

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

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

你可以在 API reference 查看 teleport 组件。