vue3快速入门-Teleport传送(瞬移组件)

2023-11-13

Vue 的组件架构使我们能够将用户界面构建为能够精美地组织业务逻辑和表示层的组件。Teleporting是Vue 3发布带来的一项新功能，它的灵感来自React Portals。相同的门户是 React 中的一个常见功能，在 Vue2 的 portal-vue 库下可用，现在 Vue 团队在名为 Portal-Vue 的第三方插件的帮助下添加了。

什么是传送？

Vue 3 带来了许多有趣的新功能和更改，旨在使框架的开发更加容易和可维护。在本文中，我们将介绍 Vue 3 的新功能 Teleport。在 Vue 3 的早期阶段，这个特性被称为 Portals，但 Vue 团队最终决定将其命名为 Teleport。顾名思义，传送是一种可以使元素从一个组件转到另一个组件的组件。在 Vue JS 术语中，它允许您在一个位置定义一个组件，并将其呈现在 DOM 树中的不同位置，甚至在 Vue 应用程序的范围之外。

如何使用它？

<teleport> 标记采用“to”属性，该属性指定要将元素传送到 DOM 中的位置。此目标必须位于组件树外部的某个位置，以避免与其他应用程序的 UI 组件发生任何类型的干扰。出于这个原因，Vue 团队建议把它放在公共目录的索引.html文件中的 body 标签下面。Vue 的组件架构使我们能够将用户界面构建为能够精美地组织业务逻辑和表示层的组件。当您使用模式或通知等组件时，您会注意到它们在 DOM 中的位置很重要。

若要在应用中使用传送组件，需要先向 html 中的 #app 元素添加同级元素。

<html>
  <body>
    <div id="app"></div>
      <!-- built files will be auto injected -->
    <div class="loader"></div>
      <!-- loader component will be injected here -->
  </body>
</html>

完成此操作后，请转到 .vue 文件并使用传送组件：

<template>
  <teleport to=".loader" v-if="showLoader">
    <Loader />
  </teleport>
  <!-- The logic of your component goes below -->
</template>

就是这样！现在，当满足 showLoader 条件时，加载程序将显示在指定的 html 元素中。

传送道具

to

— 这是一个 prop，它指定一个目标元素，其中将呈现<teleport>中的每个内容。to prop 的值必须是标识现有 CSS 类 id 或 HTMLElement 的有效查询选择器：

<!-- ok -->
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

<!-- Wrong -->
<teleport to="h1" />
<teleport to="some-string" />

disabled

— 顾名思义，此 prop 是用于禁用传送功能的布尔值。设置为 true 时，<teleport>的内容将在指定它的位置呈现。因此，它不会被“传送”到任何外部目标或位置。使用我们前面的示例，如果我们想禁用模态的传送，我们会将禁用的 prop 添加到其中，如下所示：

<!-- src/components/HelloWorld.vue -->
<teleport to="#my-modal" :disabled="true">
  <button @click="showModal = true" >Open Modal</button>
  <div v-if="showModal" id="myModal">
    <div class="modal-content">
      <span @click="showModal = false">×</span>
      <h3>This is the title</h3>
      <p>This is the content</p>
    </div>
  </div>
</teleport>

值得补充的是，您可以将内容直接传送到正文，而不仅仅是指定的CSS选择器。下面是一个示例：

<!-- src/components/HelloWorld.vue -->
<teleport to="#body">
  <button @click="showModal = true">Open Modal</button>
  <div v-if="showModal" id="myModal">
    <div class="modal-content">
      <span @click="showModal = false">×</span>
      <h3>This is the title</h3>
      <p>This is the content</p>
    </div>
  </div>
</teleport>

传送的目的

首先要考虑的是此瞬移功能何时以及为何可以派上用场。
我期待尝试的另一个有趣的用例是模块化应用程序。像WordPress这样的平台，允许模块在UI中渲染成不同的钩子，并且可以通过传送来设想类似的概念。

值得补充的是，您可以将内容直接传送到正文，而不仅仅是指定的CSS选择器。下面是一个示例：

结论

首先要考虑的是此瞬移功能何时以及为何可以派上用场。我期待尝试的另一个有趣的用例是模块化应用程序。像WordPress这样的平台，允许模块在UI中渲染成不同的钩子，并且可以通过传送来设想类似的概念。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)