Vue3-02.Teleport-传送门

<Teleport> 是一个内置组件，使我们可以将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中。

基本使用

传送门组件提供一种简洁而方式可以指定它里面内容的父元素（把元素传送到任意的元素内）。

<button @click="modelOpen = true">弹出一个模态窗口</button>
<Teleport to="body">
  <div v-if="modelOpen" class="model">
  <!-- 需要创建的内容 -->
    <div>
        这是一个弹窗父元素是body
        <button @click="modelOpen = false">close</button>
    </div>
  </div>
</Teleport>

• 为<Teleport>指定的目标 to 期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。让 Vue 去==传送这部分模板片段到 body 标签下==。

和组件一起使用

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

传送门禁用

<Teleport :disabled="isMobile"></Teleport>

• 场景：我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。可以对 <Teleport> 动态地传入一个 disabled prop 来处理这两种不同情况。

可复用的Teleport

template

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

渲染结果：

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