vue3的Teleport基础用法

背景

当我们使用特定组件，但是组件有不满足需求，且没有对应插槽时，我们可以使用Teleport来进行插入html节点。

示例

举个例子，当我们使用e了么的el-tab组件时，如果需要在组件的最右边菜单栏的右边做一个加号按钮用于新增tab时，此时就可以使用Teleport。上草图：

用法

to的值表示传送的位置，会传送在这个选择器的最后方，相当于一个js的append操作。Teleport里面正常书写需要插入的内容就行了

<el-tabs
  ref="tabsRef"
  v-model="activeTab"
  type="card"
  @tab-remove="handleRemoveTab"
>
  <el-tab-pane
    v-for="item in tabs"
    :key="item.name"
    :label="item.label"
    :name="item.name"
    :closable="item.closable"
  >
    {{ item.content }}
  </el-tab-pane>
</el-tabs>

<!-- 将加号按钮传送到标签导航容器末尾 -->
<Teleport :to="navContainer" v-if="navContainer">
  <div class="custom-add-tab" @click="handleAddTab">
    <el-icon><Plus /></el-icon>
  </div>
</Teleport>