【Vue3 第二十一章】Teleport组件传送

MagnumHou

已于 2023-09-14 11:08:33 修改

阅读量905

点赞数

分类专栏： Vue 前端开发文章标签： javascript 前端 vue.js

于 2023-02-27 20:58:46 首次发布

本文链接：https://blog.csdn.net/qq_39335404/article/details/129249904

版权

前端开发同时被 2 个专栏收录

86 篇文章 6 订阅

订阅专栏

Vue

64 篇文章 15 订阅

订阅专栏

文章目录

前言
一、基本使用场景
二、动态控制 Teleport
三、多个 Teleport 共享目标
四、同一个组件渲染到不同 Teleport 中
五、总结
- 5.1 与potrtal-vue插件对比

前言

Teleport 传送门组件提供一种简洁的方式可以指定它里面内容的父元素。允许我们控制Teleport的嵌套的内容在DOM中哪个父节点下呈现HTML，而不必求助于全局状态或者拆为两个组件。
像modal 模态框这样的组件，我们一般会将它完全的和我们的vue应用的DOM 完全剥离，管理起来反而容易。

数字化管理平台
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
 个人博客地址

一、基本使用场景

1.1 概述

有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

1.2 代码实现

试想下面这样的 HTML 结构：

<div class="outer">
  <h3>Tooltips with Vue 3 Teleport</h3>
  <div>
    <MyModal />
  </div>
</div>

接下来我们来看看 <MyModal> 的实现：

<script setup>
    import { ref } from 'vue'

    const open = ref(false)
</script>

<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</template>

<style scoped>
    .modal {
      position: fixed;
      z-index: 999;
      top: 20%;
      left: 50%;
      width: 300px;
      margin-left: -150px;
    }
</style>

这个组件中有一个 <button> 按钮来触发打开模态框，和一个 class 名为 .modal 的 <div>，它包含了模态框的内容和一个用来关闭的按钮。

当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：

position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点 <div class="outer"> 设置动画，就会不小心破坏模态框的布局！
这个模态框的 z-index 受限于它的容器元素。如果有其他元素与 <div class="outer"> 重叠并有更高的 z-index，则它会覆盖住我们的模态框。

1.3 优化

<Teleport> 提供了一个更简单的方式来解决此类问题，让我们不需要再顾虑 DOM 结构的问题。让我们用 <Teleport> 改写一下 <MyModal>
通过 to 属性指定将 Teleport 内容传送到的位置。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。

<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

Teleport 是Vue 3.0新特性之一。
Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术（保持逻辑上的父子关系）
<Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，你需要确保在挂载 <Teleport> 之前先挂载该元素。

二、动态控制 Teleport

在某些场景下可能需要视情况禁用 <Teleport>。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 <Teleport> 动态地传入一个 disabled prop 来处理这两种不同情况。

使用 disabled 设置为 true 则 to属性不生效， false 则生效

<script setup>
	import { ref } from "vue";
	let isMobile = ref(true)
</script>
<template>
	<teleport :disabled="isMobile" to='body'>
      <Mobile></Mobile>
    </teleport>
</template>

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。

三、多个 Teleport 共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。如下示例：

<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染结果为：

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

四、同一个组件渲染到不同 Teleport 中

<Teleport to="modal1">
     <Loading></Loading>
</Teleport>
<Teleport to="modal2">
     <Loading></Loading>
</Teleport>

五、总结

5.1 与potrtal-vue插件对比

teleport 取代vue2中的portal-vue插件，然而，实践发现，teleport 的目标元素不能由组件本身呈现，只能移植到组件外部有效

const app = {
  template: `
  <div>
    <h1>App</h1>
      <!-- Teleport目标元素 -->
    <div id="dest"></div>
      <!-- comp 包含Teleport -->
    <comp />
  </div>`
}


Vue.createApp(app).component('comp', {
  template: `
  <div>
    A component
    <Teleport to="#dest">
      Hello From Portal
    </Teleport>
  </div>`
}).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></script>
<div id="app"></div>

打开浏览器会发现，Teleport 移植的内容并没有渲染到对应的位置，并且控制台告警：目标元素必须在组件挂载之前存在——也就是说，目标不能由组件本身呈现，理想情况下应该在整个Vue组件树之外。

[Vue warn]: Failed to locate Teleport target with selector "#dest". Note the target element must exist before the component is mounted - i.e. the target cannot be rendered by the component itself, and ideally should be outside of the entire Vue component tree.

teleport的目标元素若是在直接引用包含teleport的组件的父组件上，则无效，并会告警，移植到组件外部有效。

解决方案就是添加挂载判断

const app = {
  template: `
  <div>
    <h1>App</h1>
    <div id="dest"></div>
    <comp />
  </div>`
}

Vue.createApp(app).component('comp', {
  template: `
  <div>
    A component
    <Teleport to="#dest" v-if="isMounted">
      Hello From Portal
    </Teleport>
  </div>`,
  data: function(){
    return { 
        isMounted: false
    }
  },
  mounted(){
    this.isMounted = true
  }
}).mount('#app')

注意，使用vite 构建：项目根目录下面建立 vite.config.js配置别名

alias: {
  'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
},