Vue移动 HTML 元素到指定位置 teleport 标签

teleport 标签：用于将组件中的 HTML 元素移动到任意的位置。

 使用 teleport 标签移动 HTML 元素：

<!-- 将 teleport 中的内容移动到 body 标签中  -->
<teleport to="body">
    <div>
        <h3>我是第三层组件的标题</h3>
        <p>我是第三层组件的内容</p>
        <p>我是第三层组件的内容</p>
        <p>我是第三层组件的内容</p>
    </div>
</teleport>

注：teleport 标签也可以通过 id 名移动，例如：`<teleport to="#box">`

 

 使用 teleport 标签制作全局弹窗：

第一层组件：

<template>
  <div class="one">
    <h3>我是One组件（第一层）</h3>
    <hr />
    <Two></Two>