vue3.0之teleport用法

index.html

<div id="app"></div>
  <div id="ile">我是tel</div>

cont1.vue

<template>
  <div>
    {{propContent}}
    <button @click="cht">改变</button>
    <teleport to="#ile">
      <div class="tel-cont">111</div>
    </teleport>
  </div>
</template>

<style lang="less" scoped>
.tel-cont {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 300px;
  padding: 30px;
  background-color: yellow;
}
</style>

teleport 主要就是用在类似遮罩弹框这种，可以在子组件控制逻辑，但是DOM对象却是在body下的这种效果

vue3.0之teleport用法

推荐阅读