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下的這種效果