Vue3内置组件

Teleport

可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

1、基本用法

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

接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象

还可以将 和 结合使用来创建一个带动画的div

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

// 告诉 Vue“把以下模板片段传送到 body 标签下”
<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

TIP

挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的，需要确保在挂载 之前先挂载该元素。

2、搭配组件使用

只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 包含了一个组件，那么该组件始终和这个使用了 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。

来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

3、禁用 Teleport

动态地传入一个 disabled prop 来处理这两种不同情况。

//  isMobile 状态可以根据 CSS media query 的不同结果动态地更新
<Teleport :disabled="isMobile">

4、多个 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>