Vue.js 组合 API 多个具有相同目标元素的传送

Vue.js是一个用于开发 Web 用户界面的渐进式 JavaScript 框架。它是一个高性能、平易近人且通用的框架。我们可以创建单页应用程序以及全栈应用程序。它建立在 HTML、CSS 和 Javascript 之上，这使得开发人员可以更轻松地在任何阶段将 Vue.js 集成到任何应用程序中。

Composition API Teleports允许在不需要存在的地方传输一段代码。它是 Vue.js 中的一个内置组件，存在于 DOM 层次结构之外，但可以移植 DOM 树中的一些元素。我们可以使用它来创建模态框，即出现在网页顶部以吸引用户注意力的屏幕。

组合 API 多个传送到相同的目标元素意味着我们可以将不同的内容传送到相同的元素。多个瞬移的应用是创建一个可重用的 Modal 组件，该组件在整个应用程序中以相同的方式出现。

Vue.js 组合 API 多个 Teleports 属性：

• to ：此属性将传送中的代码段传输到列表中提到的元素。

语法：为了创建多个具有相同目标的传送，我们在传送的to属性中提到相同的目标元素。

  
First Modal


  
Second Modal

示例：在下面的示例中，我们有三个模态，我们将它们转移到 index.html 文件中的 div 元素，而不将代码放在 index.html 文件中。因此，我们将多次传送到同一个目标元素。

第 1 步：使用以下命令使用 npm node.js 包管理器创建一个新的 Vue.js 项目。

npm init vue@latest

输入项目名称并预设项目如下：

项目结构：安装成功后，会形成如下的项目结构。

项目结构

第 2 步：在 index.html 文件中，创建一个新的 div 容器并为其提供 modal-container 的 id。这将保存我们将传送到的模态。因此，在 div 容器之后添加新容器，其id为应用程序，如下所示：

index.html

  
    
    
    
    GeeksforGeeks
  
  
    
    
    
  

第 3 步：在 App.vue 文件的脚本设置部分中，添加最初设置为 false 的布尔变量，负责模态框的可见性。

应用程序.vue

  import { ref } from "vue";
  const modal1 = ref(false);
  const modal2 = ref(false);
  const modal3 = ref(false);

第四步：在 App.vue 文件的模板部分，添加三个 Teleport 元素和一些模态内容，如下所示：

第 5 步：在 App.vue 文件中添加 Teleport modals 所需的样式。

应用程序.vue

这是 App.vue 的完整代码。

应用程序.vue

  import { ref } from "vue";
  const modal1 = ref(false);
  const modal2 = ref(false);
  const modal3 = ref(false);


  

  .modal-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(172, 172, 172, 0.836);
  }
  .modal {
    width: 200px;
    padding: 20px;
    background-color: #fff;
    margin: auto;
    margin-top: 4rem;
    border-radius: 4px;
    text-align: center;
  }

第 6 步：使用以下命令运行项目并查看输出。

npm run dev

输出：成功构建项目后，打开http://localhost:3000 ，结果如下。

参考： https ://vuejs.org/guide/built-ins/teleport.html#multiple-teleports-on-the-same-target