vue 3.0 teleport

vue 3.0 teleport","p":false,"slid":"122710533061497","queryid":"0x986f9ac5bbbb79

Vue 3.0 的 Teleport 是一个新的功能，它可以让开发者在不同的组件之间传递数据和内容。Teleport 可以帮助开发者更快地创建复杂的应用，并且可以更好地组织代码。

Teleport 的工作原理是，它将一个组件中的内容传输到另一个组件中，而不需要将整个组件渲染到 DOM 中。这样就可以减少 DOM 操作，提高性能。此外，Teleport 还允许开发者使用 JavaScript 动态生成内容，而不需要将所有内容都存储在 HTML 中。

Teleport 还具有一些其他优势：

• 减少重复代码 - Teleport 可以帮助开发者减少重复代码，因为它允许开发者将相同的内容传递到多个位置。
• 更好的代码组织 - Teleport 可以帮助开发者更好地整理代码，因为它允许将相关的内容集中到一起。
• 更快速的应用开发 - Teleport 可以帮助开发者快速创建复杂的应用，因为它减少了 DOM 操作和重复代码。

总之，Vue 3.0 的 Teleport 是一项很有用的新功能，能够帮助开发者构建出更快、更好、更有效的应用。

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

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

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

考虑下面的 HTML 结构。

Tooltips with Vue 3 Teleport

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

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

const app = Vue.createApp({});


app.component("modal-button", {
  template: `Open full screen modal!I"m a modal!Close`,
  data() {
    return { 
      modalOpen: false
    }
  }
})

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

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

让我们修改 modal-button 以使用 ，并告诉 Vue “Teleport 这个 HTML 到该‘body’标签”。

app.component("modal-button", {
  template: `Open full screen modal! (With teleport!)I"m a teleported modal! 
          (My parent is "body")Close`,
  data() {
    return { 
      modalOpen: false
    }
  }
})

因此，一旦我们单击按钮打开模式，Vue 将正确地将模态内容渲染为 body 标签的子级。

点击此处实现

#与 Vue components 一起使用

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

const app = Vue.createApp({
  template: `Root instance`
})


app.component("parent-component", {
  template: `This is a parent component`
})


app.component("child-component", {
  props: ["name"],
  template: `Hello, {{ name }}`
})

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

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

#在同一目标上使用多个 teleport

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

ABAB

你可以在 API 参考 查看 teleport 组件。