Vue3.0（2）：Teleport

Teleport

官方文档

Teleport汉语意思是传送，从官方文档看这个名字很符合，可以将代码片段传送到其他位置

官方示例1（略作修改）

//不使用Teleport
<template>
  <div>
    <el-button type="primary" @click="openModel = true">打开</el-button>
    <div title="main">
      <div >
        <div
          v-show="openModel"
          style="width: 100px; height: 100px; background: red"
        >
          <el-button type="primary" @click="openModel = false">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

//使用Teleport
<template>
  <div>
    <el-button type="primary" @click="openModel = true">打开</el-button>
    <div title="main">
        <teleport to="body">
        <div
          v-show="openModel"
          style="width: 100px; height: 100px; background: red"
        >
          <el-button type="primary" @click="openModel = false">关闭</el-button>
        </div>
      </teleport>
      </div>
    </div>
  </div>
</template>

• 首先用了v-show代替了v-if，原因就不解释了
• 从上面两张图可以看出不使用teleport元素是被渲染到了div中，而使用teleport元素直接被渲染到了body下

与 Vue components 一起使用

<teleport to="#tobody">
    <modal-button></modal-button>
 </teleport>

• 即使在不同的地方渲染子组件，它仍将是 父组件 的子级，并将从中接收 父组件传递的prop属性。
• #tobody 是元素的id标识

在同一目标上使用多个 teleport

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

<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

• 多个 组件可以将其内容挂载到同一个目标元素。顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之后。